/* AgentProbe Global Styles */

/* ── Design Tokens ──
   Minimal, dark-only token set. Every value maps 1:1 to a colour/radius that
   was already repeated across this stylesheet — nothing new is invented. This
   is the single source for the AgentProbe palette (see docs/BRAND.md). */
:root {
    /* Dark theme for native UI (Memo 033, user live review: "alle Auswahllisten sind noch hell").
       color-scheme tells the browser to render native form controls — the <select> popup list,
       scrollbars, checkboxes — in dark instead of the default light. */
    color-scheme: dark;

    /* Surfaces */
    --bg: #030712;                          /* page background (gray-950) */
    --surface: rgba(255, 255, 255, 0.03);   /* cards / panels */
    --surface-2: rgba(255, 255, 255, 0.02); /* nested / subtle panels */

    /* Borders & dividers */
    --border: rgba(255, 255, 255, 0.06);    /* default hairline border */
    --border-soft: rgba(255, 255, 255, 0.05); /* faint divider / track */

    /* Text */
    --text: #f3f4f6;         /* body text (gray-100) */
    --text-strong: #e5e7eb;  /* emphasised text (gray-200) */
    --muted: #9ca3af;        /* secondary text (gray-400) */
    --muted-2: #6b7280;      /* tertiary text (gray-500) */

    /* Accent & status — LOCKED to the amber sunrise system (Memo 035).
       Amber #f59e0b is the single brand accent site-wide; the old indigo remap is
       retired. --success stays a distinct green: it is a status signal (live / verified /
       positive), never the brand colour. */
    --accent: #f59e0b;         /* amber-500 — primary brand accent */
    --accent-strong: #fbbf24;  /* amber-400 — accent hover / highlight */
    --success: #34d399;        /* emerald-400 — status only: pass / live / positive */

    /* Complementary second accent (Memo 035, user review "not everything gold").
       A MUTED, desaturated tone by design: the gold is already vivid, so a second
       equally-bright colour reads carnival, not elegant (user rejected periwinkle
       "muddy" and sky-blue "baby-blue, not classy"). A dusty plum/violet keeps the
       gold as the one star and stays restrained/premium. Role: the data / discovery
       dimension — secondary metrics, discovery charts, directory navigation — never the
       primary CTA (amber) and never a status signal (green). NOTE: exact hue still being
       tuned with the user; swap these two values (+ the rgb in categories.js) to retone. */
    --accent-2: #9684b3;         /* dusty plum/violet — secondary / discovery accent */
    --accent-2-strong: #b7a8d0;  /* its hover / highlight */

    /* Radii */
    --radius-md: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    /* Type */
    --font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ── Base ── */
html, body {
    background-color: var(--bg);
    color: var(--text);
}

/* ── Skip Link (a11y, WI-107) ──
   First focusable element on the page; visually hidden until it receives keyboard focus. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 8px 16px;
    background: var(--accent);
    color: var(--bg);
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ── Tab Navigation ── */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: rgba(255, 255, 255, 0.7);
}

.tab-btn.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-strong);
}

/* ── Custom Select (Memo 033 PRD-15) ──
   Directory dropdowns use `appearance-none`, which removes the native arrow; this paints a
   consistent chevron so the box never reads as unstyled. Pairs with `pr-8` in the class. */
.ap-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 0.85rem;
}

/* ── Global focus system (Memo 033, user review) ──
   ONE elegant, consistent focus treatment for the whole site — replaces the heavy per-element
   `focus:ring-2` that read as too extreme and looked different on every page. Form controls get a
   soft accent halo; other interactive elements get a clean accent outline. Uses :focus-visible so a
   focus ring only appears for keyboard/programmatic focus, not on every mouse click. */
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba( 111, 155, 255, 0.16 );
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgba( 111, 155, 255, 0.5 );
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Loading Spinner ── */
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Loading skeleton (task-list 2026-08-04) ──
   Replaces the lonely centered spinner in the SPA list/grid views (js spinner()). The skeleton
   reserves a realistic content height while data loads, so the footer no longer rides up into view
   and then jumps down when the table appears. Theme-aware via tokens; respects reduced-motion. */
.ap-skel-wrap {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}
.ap-skel {
    border-radius: 10px;
    background-color: var(--surface);
    background-image: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    background-size: 480px 100%;
    background-repeat: no-repeat;
    animation: ap-skel-shimmer 1.4s ease-in-out infinite;
}
.ap-skel-row { height: 56px; }
@keyframes ap-skel-shimmer {
    0% { background-position: -240px 0; }
    100% { background-position: calc(100% + 240px) 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-skel { animation: none; }
}

/* ── Verdict Grid ── */
.verdict-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.verdict-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 12px;
    text-align: center;
    transition: all 0.2s;
}

.verdict-card.pass {
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.05);
}

.verdict-card.fail {
    border-color: var(--border);
}

.verdict-card .verdict-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

.verdict-card .verdict-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-strong);
}

.verdict-card .verdict-detail {
    font-size: 11px;
    color: var(--muted);
}

/* ── Results Container ── */
.results-section {
    display: none;
}

/* ── Detail Section ── */
.detail-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.detail-section h3 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--muted);
}

/* ── Collapsible Section Toggle ── */
.section-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    margin-bottom: 12px;
}

.section-toggle:hover {
    opacity: 0.8;
}

.section-toggle h3 {
    margin-bottom: 0;
}

.section-arrow {
    font-size: 11px;
    width: 16px;
    color: var(--muted-2);
}

/* ── Check Icons ── */
.check-yes { color: var(--success); }
.check-no { color: var(--muted-2); }
.check-unknown { color: #f59e0b; font-size: 12px; }

/* ── Probe Summary ── */
.probe-summary .field {
    display: flex;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 4px;
}

.probe-summary .field .label {
    color: var(--muted);
    min-width: 160px;
}

/* ── Categories Grid ── */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

/* ── Badge ── */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    margin-right: 4px;
    margin-bottom: 4px;
}

.badge-green {
    background: rgba(52, 211, 153, 0.12);
    color: var(--success);
}

.badge-blue {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.badge-purple {
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
}

/* ── Tools Grid ── */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.tool-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13px;
}

.tool-item .tool-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.tool-item .tool-desc {
    color: var(--muted);
    font-size: 12px;
}

.tool-item.x402-tool {
    border-color: rgba(52, 211, 153, 0.2);
    background: rgba(52, 211, 153, 0.03);
}

/* ── Latency Bar ── */
.latency-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 4px;
}

.latency-bar .latency-label {
    color: var(--muted);
    min-width: 120px;
}

.latency-bar .latency-track {
    flex: 1;
    height: 6px;
    background: var(--border-soft);
    border-radius: 3px;
    overflow: hidden;
    max-width: 200px;
}

.latency-bar .latency-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.latency-bar .latency-value {
    font-family: var(--font-mono);
    min-width: 60px;
}

/* ── Messages List ── */
.messages-list {
    list-style: none;
    padding: 0;
}

.messages-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--muted);
    font-family: var(--font-mono);
}

.messages-list li:last-child {
    border-bottom: none;
}

/* ── Payment Option Groups ── */
.payment-option-group {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    padding: 12px 14px;
}

.payment-option-header {
    margin-bottom: 6px;
}

.payment-option-details {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.payment-option-tools {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8;
}

.tool-tag {
    display: inline-block;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: #60a5fa;
}

/* ── Raw Assessment ── */
.raw-assessment-section {
    margin-top: 12px;
}

.raw-actions {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}

.raw-btn {
    background: var(--border-soft);
    color: var(--muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.raw-btn:hover {
    color: var(--text-strong);
    border-color: var(--accent);
}

.detail-section pre {
    margin: 0;
    padding: 16px 0;
    max-height: 500px;
    overflow: auto;
}

.detail-section code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    white-space: pre;
}

/* ── Dependency Footer ── */
.dep-info {
    font-size: 12px;
    color: var(--muted-2);
    line-height: 2;
}

.dep-info-label {
    display: block;
    font-size: 11px;
    color: var(--muted-2);
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dep-link {
    color: #d1d5db;
    text-decoration: none;
    margin: 0 2px;
    transition: color 0.15s;
}

.dep-link:hover {
    color: var(--accent);
}

.dep-hash {
    font-family: var(--font-mono);
    color: var(--muted-2);
    font-size: 11px;
}

.dep-link:hover .dep-hash {
    color: var(--accent);
}

/* ── Endpoint Links ── */
.endpoint-link {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all;
    transition: color 0.15s;
}

.endpoint-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .verdict-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .verdict-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Agent URI Generator ── */
.agent-uri-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.agent-uri-warning {
    font-size: 13px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.agent-uri-json {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    max-height: 320px;
    overflow: auto;
    margin: 0;
}

.agent-uri-json code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    white-space: pre;
}

.agent-uri-input {
    width: 100%;
    background: var(--border-soft);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-strong);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.agent-uri-input:focus {
    border-color: var(--accent);
}

.agent-uri-input::placeholder {
    color: var(--muted-2);
}

.agent-uri-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.agent-uri-btn {
    background: rgba(52, 211, 153, 0.1);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.2);
    padding: 6px 16px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.agent-uri-btn:hover {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
}

.agent-uri-btn:active {
    background: rgba(52, 211, 153, 0.2);
    transform: scale(0.98);
}

.agent-uri-links {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.agent-uri-links code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-strong);
}

.agent-uri-chain-link {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.agent-uri-chain-link:hover {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.5);
}

.agent-uri-diff {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--font-mono);
}

.diff-added {
    color: var(--success);
}

.diff-removed {
    color: #f87171;
}

.diff-changed {
    color: #fbbf24;
}


/* Elegant thin scrollbar for scroll-capped panels (Memo 033 detail redesign — the Servers list is
   capped at max-height and scrolls internally instead of running the page endlessly long). */
.ap-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.ap-scroll::-webkit-scrollbar {
    width: 8px;
}

.ap-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ap-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.ap-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--surface-3, #374151);
    background-clip: content-box;
}


/* Copy-endpoint button state (Memo 033 detail redesign). The idle/done labels swap on [data-copied],
   set briefly by the delegated handler after a successful clipboard write. */
.js-copy-label-done {
    display: none;
}

.js-copy-endpoint[data-copied] {
    color: var(--success, #34d399);
    border-color: rgba(52, 211, 153, 0.4);
}

.js-copy-endpoint[data-copied] .js-copy-label-idle {
    display: none;
}

.js-copy-endpoint[data-copied] .js-copy-label-done {
    display: inline;
}


/* Native select popups follow the SITE THEME (Memo 038 Kap 7 — Ebene A, cross-browser fix).
   The old hard-coded `color-scheme:dark` on every <select> collided with the light default
   (Firefox overlapped the option list over the button; Chrome rendered a large dark, displaced
   popup with oversized text). color-scheme is inherited, so a <select> now follows :root (dark)
   / html[data-theme="light"] (light) with no explicit rule. The <option> background is a dark
   default with a light-theme override so the list matches the page in both themes. */
select option {
    background-color: #0b1220;
    color: var(--text);
}

html[data-theme="light"] select option {
    background-color: #ffffff;
    color: var(--text);
}



/* ============================================================
   Memo 035 — Frontpage design system (both themes).
   Dark = the site's base :root tokens. Light = overrides on
   html[data-theme="light"]. Warm amber (#f59e0b) is the sunrise
   accent — primary CTA + serif headline accent only (T013).
   ============================================================ */
:root{
  --amber:#f59e0b; --amber-hi:#fbbf24;
  --serif-display:'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:'National Park', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif-accent:#fbbf24;
  --card-ring:rgba(255,255,255,.10);
  --cm-bg:#141d30;      /* connect-modal panel — ELEVATED above the near-black page bg (dark) */
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f6f3; --surface:#ffffff; --surface-2:#faf9f6;
  --border:rgba(20,20,30,.10); --border-soft:rgba(20,20,30,.07);
  --text:#191a1f; --text-strong:#0f1014;
  --muted:rgba(25,26,31,.66); --muted-2:rgba(25,26,31,.55);
  --success:#0f9d63; --serif-accent:#c2760a; --card-ring:rgba(20,20,30,.10);
  --cm-bg:#ffffff;      /* connect-modal panel (light) */
  /* Deeper plum so the second accent stays legible on the light background. */
  --accent-2:#6d5a92; --accent-2-strong:#574a7a;
}

.ap-page{ background:var(--bg); color:var(--text); font-family:var(--sans); --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; transition:background .4s ease,color .4s ease; }
.ap-page .eyebrow{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); display:inline-flex; align-items:center; gap:8px; }

/* ---- Hero (centered, full-bleed, dissolves into the page bg) ---- */
.hero{ position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; isolation:isolate; text-align:center; }
.hero-scene{ position:absolute; inset:0; z-index:-2; background:#071233 url('/assets/hero/hero-desktop.webp') center 42% / cover no-repeat; }
.hero-fade{ position:absolute; left:0; right:0; bottom:0; height:54%; z-index:-1;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 52%, transparent) 56%, var(--bg) 100%); }
.hero-inner{ position:relative; width:100%; padding-top:150px; }
.eyebrow--hero{ color:rgba(255,255,255,.72); margin-bottom:22px; }
.hero-title{ font-family:var(--sans); font-weight:700; font-size:clamp(38px,5.8vw,74px); line-height:1.07; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 44px rgba(3,8,20,.5); max-width:16ch; margin:0 auto; }
.hero-title em{ font-family:var(--serif-display); font-weight:400; font-style:italic; color:var(--amber-hi); letter-spacing:0; font-size:1.16em; line-height:.9; padding:0 .03em; }
.hero-lead{ margin:22px auto 0; max-width:34rem; font-size:18px; line-height:1.6; color:rgba(255,255,255,.84); text-shadow:0 1px 20px rgba(3,8,20,.5); }
.hero-cta{ margin-top:34px; display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }
.hero-mini{ margin-top:36px; display:inline-flex; justify-content:center; font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,.68); }
.hero-mini span{ padding:0 18px; border-left:1px solid rgba(255,255,255,.2); }
.hero-mini span:first-child{ border-left:0; }
.hero-mini b{ color:#fff; font-weight:600; }

/* ---- Shiny CTA (running amber border) ----
   A bright amber light continuously sweeps the button's perimeter — the "constant
   invitation to click" (superteam.fun/hackathon reference). Built as a ROTATING conic
   pseudo-element (transform:rotate), NOT the @property angle trick: @property is
   unsupported in Safari 15 / macOS 12, where the old version rendered a dead, static
   ring. This technique animates everywhere.
     ::before = oversized conic gradient spinning behind the button
     ::after  = the dark inner pill that masks all but a ~2px ring of ::before */
.shiny-cta{ position:relative; z-index:0; display:inline-flex; align-items:center; gap:9px; padding:16px 30px; border-radius:9999px; overflow:hidden; font-family:var(--sans); font-size:15px; font-weight:600; color:#fff; text-decoration:none; cursor:pointer; background:transparent;
  box-shadow:0 10px 34px -16px rgba(245,158,11,.6), 0 0 24px -8px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.14); transition:transform .2s cubic-bezier(0,0,.2,1); }
/* base ring is always faintly amber (constant invitation); a white-hot comet sweeps it */
.shiny-cta::before{ content:""; position:absolute; z-index:-2; left:50%; top:50%; width:240%; height:520%; transform:translate(-50%,-50%) rotate(0deg); transform-origin:center;
  background:conic-gradient(from 0deg, rgba(245,158,11,.32) 0deg, rgba(245,158,11,.32) 195deg, var(--amber) 250deg, #ffffff 300deg, var(--amber-hi) 335deg, rgba(245,158,11,.32) 360deg);
  filter:drop-shadow(0 0 5px rgba(245,158,11,.6));
  animation:ap-cta-spin 3s linear infinite; }
.shiny-cta::after{ content:""; position:absolute; z-index:-1; inset:2px; border-radius:9999px; background:linear-gradient(180deg,#3b3b43,#1e1e24); }
.shiny-cta:hover{ transform:scale(1.03); }
.shiny-cta:hover::after{ background:linear-gradient(180deg,#44444d,#25252c); }
@keyframes ap-cta-spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .shiny-cta::before{ animation:none; background:var(--amber); } }
.shiny-cta.is-mini{ padding:9px 18px; font-size:14px; }

.ghost-cta{ display:inline-flex; align-items:center; gap:8px; padding:16px 26px; border-radius:9999px; font-family:var(--sans); font-size:15px; font-weight:500; text-decoration:none; cursor:pointer;
  color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s,border-color .2s,color .2s,transform .2s; }
.ghost-cta:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
html[data-theme="light"] .ghost-cta{ background:rgba(255,255,255,.92); color:#191a1f; border-color:rgba(20,20,30,.10); }
html[data-theme="light"] .ghost-cta:hover{ background:#fff; }

/* ---- Floating live card ---- */
.emerge{ position:relative; z-index:3; margin-top:auto; padding-bottom:40px; }
.float-card{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--card-ring); border-radius:18px; padding:20px 26px;
  box-shadow:0 40px 90px -34px rgba(10,15,40,.45),0 10px 30px -16px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.fc-live{ width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 var(--success); animation:ap-pulse 2.4s infinite; flex:none; }
@keyframes ap-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%,transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.fc-stat{ display:flex; flex-direction:column; gap:3px; }
.fc-stat b{ font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--text-strong); }
.fc-stat span{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); }
.fc-spark{ margin-left:auto; display:flex; align-items:flex-end; gap:3px; height:38px; }
.fc-spark i{ display:block; width:5px; border-radius:2px; background:linear-gradient(180deg,var(--amber),var(--amber-hi)); opacity:.85; }

/* ---- Curation strapline ---- */
.strapline{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); padding:8px 0 32px; }

/* ---- Protocol strip ---- */
.logo-strip{ text-align:center; padding:4px 0 48px; }
.logo-strip__label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:22px; }
.logo-strip__row{ display:flex; align-items:center; justify-content:center; gap:clamp(28px,6vw,72px); flex-wrap:wrap; }
.proto-logo{ height:26px; width:auto; opacity:.62; transition:opacity .2s; filter:brightness(0) invert(1); }
html[data-theme="light"] .proto-logo{ filter:none; opacity:.72; }
.proto-logo:hover{ opacity:1; }

/* ---- Stat band ---- */
.stat-band{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface-2); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-cell{ padding:36px 24px; text-align:center; border-left:1px solid var(--border-soft); }
.stat-cell:first-child{ border-left:0; }
.stat-n{ font-family:var(--font-mono); font-size:clamp(26px,3vw,34px); font-weight:700; letter-spacing:-.02em; color:var(--text-strong); }
.stat-n.accent{ color:var(--amber); }
.stat-l{ margin-top:8px; font-size:13px; color:var(--muted); }

/* ---- Section heads ---- */
.section-h{ text-align:center; font-size:clamp(26px,3.4vw,34px); font-weight:700; letter-spacing:-.01em; color:var(--text-strong); }
.section-h em{ font-family:var(--serif-display); font-style:italic; font-weight:400; color:var(--serif-accent); font-size:1.15em; line-height:.9; padding:0 .03em; }
.section-note{ text-align:center; max-width:42rem; margin:26px auto 0; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---- Features ---- */
.feature-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; transition:transform .2s cubic-bezier(0,0,.2,1),border-color .2s,box-shadow .3s; }
.feature-card:hover{ transform:translateY(-3px); border-color:var(--card-ring); box-shadow:0 22px 50px -26px rgba(10,15,40,.5); }
.feature-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--amber) 14%,transparent); color:var(--amber); }
.feature-ic svg{ width:20px; height:20px; }
.feature-card h3{ margin-top:18px; font-size:18px; font-weight:600; color:var(--text-strong); }
.feature-card p{ margin-top:8px; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---- Discover · Validate · Trust triad (Memo 035 — replaces the generic SaaS card
   grid: leaner, editorial, no icon-boxes; distinct from the protocol cards below) ---- */
.triad{ margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); }
.triad__item{ padding:4px 34px; border-left:1px solid var(--border); }
.triad__item:first-child{ padding-left:0; border-left:0; }
.triad__n{ font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--amber); }
.triad__item h3{ margin-top:14px; font-family:var(--sans); font-size:20px; font-weight:600; color:var(--text-strong); }
.triad__item p{ margin-top:10px; font-size:14px; line-height:1.62; color:var(--muted); }
@media(max-width:820px){
  .triad{ grid-template-columns:1fr; gap:26px; }
  .triad__item,.triad__item:first-child{ padding:0 0 0 16px; border-left:1px solid var(--border); }
}

/* ---- Chains strip ---- */
.chains-strip{ text-align:center; padding:8px 0 64px; }
.chains-strip__label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:22px; }
.chains-strip__label b{ color:var(--text-strong); font-weight:600; }
.chains-strip__row{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,30px); flex-wrap:wrap; }
.chain-logo{ height:36px; width:36px; box-sizing:border-box; padding:5px; object-fit:contain; border-radius:9px; background:color-mix(in srgb,var(--text) 7%,transparent); border:1px solid var(--border-soft); opacity:.92; transition:opacity .2s,transform .2s; }
.chain-logo:hover{ opacity:1; transform:translateY(-2px); }

/* ---- Worldbox (Prava live experiment) ---- */
.worldbox{ display:grid; grid-template-columns:320px 1fr; max-width:900px; margin:0 auto; background:var(--surface); border:1px solid var(--card-ring); border-radius:18px; overflow:hidden; box-shadow:0 30px 80px -40px rgba(10,15,40,.5); }
.worldbox__scene{ position:relative; min-height:210px; display:flex; align-items:flex-start; padding:16px; background:#071233 url('/assets/hero/hero-desktop.webp') center 30% / cover no-repeat; }
.worldbox__scene::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,7,18,.35), transparent 40%, rgba(3,7,18,.25)); }
.worldbox__scene::after{ content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:26px 26px; -webkit-mask:radial-gradient(92% 72% at 50% 100%,#000,transparent 72%); mask:radial-gradient(92% 72% at 50% 100%,#000,transparent 72%); }
.worldbox__badge{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.2); padding:5px 10px; border-radius:9999px; }
.worldbox__body{ padding:28px 30px; }
.worldbox__body .eyebrow{ color:var(--amber); margin-bottom:12px; }
.worldbox__body h3{ font-size:23px; font-weight:700; color:var(--text-strong); line-height:1.2; }
.worldbox__body h3 em{ font-family:var(--serif-display); font-style:italic; font-weight:400; color:var(--serif-accent); }
.worldbox__body p{ margin-top:10px; font-size:15px; line-height:1.6; color:var(--muted); }
.worldbox__link{ display:inline-block; margin-top:16px; font-size:14px; font-weight:600; color:var(--serif-accent); text-decoration:none; }
.worldbox__link:hover{ text-decoration:underline; }

/* ---- Check-your-server card ---- */
.checkbox-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:40px; text-align:center; }
.checkbox-lead{ max-width:38rem; margin:18px auto 0; font-size:15px; line-height:1.65; color:var(--muted); }
.checkbox-cta{ margin-top:26px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.checkbox-note{ font-family:var(--font-mono); font-size:12px; color:var(--muted-2); }

/* ---- Connect code card ---- */
.connect-head{ text-align:center; margin-bottom:28px; }
.code-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.code-card__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot--r{ background:rgba(248,113,113,.5); } .dot--y{ background:rgba(250,204,21,.5); } .dot--g{ background:rgba(52,211,153,.5); }
.code-card__title{ margin-left:8px; font-family:var(--font-mono); font-size:12px; color:var(--muted-2); }
.code-card__pre{ margin:0; padding:20px; font-family:var(--font-mono); font-size:13px; line-height:1.65; overflow-x:auto; color:var(--muted); }
.c-com{ color:var(--muted-2); } .c-pun{ color:var(--muted-2); } .c-key{ color:var(--amber); } .c-str2{ color:var(--text); } .c-str{ color:var(--success); } .c-url{ color:var(--accent); }

/* ---- Responsive ---- */
@media(max-width:900px){
  .worldbox{ grid-template-columns:1fr; } .worldbox__scene{ min-height:140px; }
  .feature-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); } .stat-cell:nth-child(3){ border-left:0; }
}
@media(max-width:820px){
  .hero{ min-height:94vh; }
  .hero-scene{ background-image:url('/assets/hero/hero-mobile.webp'); background-position:center top; }
  .hero-inner{ padding-top:112px; }
  .hero-mini{ display:none; }              /* redundant with the float card + collides on mobile */
  .fc-spark{ display:none; }
  .float-card{ gap:14px 20px; padding:16px 18px; }
  .fc-stat b{ font-size:19px; }
}

/* ---- Shared header (theme-aware; floats transparent over a hero) ---- */
.ap-header{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); transition:background .3s,border-color .3s; }
.ap-header--hero{ position:fixed; left:0; right:0; background:transparent; border-bottom-color:transparent; }
.ap-header--hero.ap-header--scrolled{ background:color-mix(in srgb,var(--bg) 82%,transparent); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border-bottom-color:var(--border); }
.ap-brand__dot{ width:16px; height:16px; border-radius:5px; background:conic-gradient(from 210deg,var(--amber),var(--amber-hi),#8fb0ff,var(--amber)); flex:none; }
.ap-brand__name{ color:var(--text-strong); }
.ap-nav-link{ color:var(--muted); }
.ap-nav-link:hover{ color:var(--text-strong); }
.ap-nav-link--active{ color:var(--amber); }
.ap-theme-toggle{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; transition:color .2s,border-color .2s; }
.ap-theme-toggle:hover{ color:var(--text-strong); }
.ap-burger{ color:var(--muted); background:none; border:0; cursor:pointer; padding:4px; }
/* over the hero image: white chrome until scrolled */
.ap-header--hero:not(.ap-header--scrolled) .ap-brand__name,
.ap-header--hero:not(.ap-header--scrolled) .ap-burger{ color:#fff; }
.ap-header--hero:not(.ap-header--scrolled) .ap-nav-link{ color:rgba(255,255,255,.8); }
.ap-header--hero:not(.ap-header--scrolled) .ap-nav-link:hover{ color:#fff; }
.ap-header--hero:not(.ap-header--scrolled) .ap-theme-toggle{ color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.28); }

/* ---- Nav menu + mobile overlay (Memo 035 #39) ----
   Desktop: an inline horizontal nav. Mobile (<640px): the burger opens a full-width
   panel that drops below the header, on the page background so it reads correctly in
   BOTH themes (the old dropdown was a cramped, hard-coded gray-900 box that was
   invisible in light). Modelled on ucpchecker.com — generous tap targets + a full-width
   Connect CTA. Driven by body.nav-open (shell.js mountMobileNav). */
.ap-menu{ display:flex; flex-direction:row; align-items:center; gap:24px; }
.ap-burger{ color:var(--muted); background:none; border:0; cursor:pointer; padding:4px; display:inline-grid; place-items:center; }
.ap-burger svg{ width:24px; height:24px; }
.ap-burger__close{ display:none; }

@media (max-width:639px){
  .ap-menu{
    position:absolute; top:100%; left:50%; width:100vw; margin-left:-50vw;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    /* Memo 035 P2#2: frosted overlay instead of a solid #030712 block — it
       reads as a panel floating over the page in both themes. */
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
    border-bottom:1px solid var(--border);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
    padding:6px 24px 24px;
  }
  body.nav-open .ap-menu{ display:flex; }
  body.nav-open .ap-burger__bars{ display:none; }
  body.nav-open .ap-burger__close{ display:block; }
  /* readable link colour even over the hero header (which otherwise forces white) */
  .ap-header .ap-menu .ap-nav-link{
    padding:15px 2px; font-size:15px; font-weight:500;
    color:var(--text) !important; border-bottom:1px solid var(--border-soft);
  }
  .ap-header .ap-menu .ap-nav-link:last-of-type{ border-bottom:0; }
  /* Memo 035 P2#3: amber-strong hover read as pale yellow-on-white in light;
     text-strong stays high-contrast in BOTH themes. */
  .ap-header .ap-menu .ap-nav-link:hover{ color:var(--text-strong) !important; }
  .ap-menu__cta{ margin-top:16px; width:100%; justify-content:center; padding:14px 16px; font-size:15px; }
}

@media (min-width:640px){
  .ap-burger{ display:none; }
}

/* ---- Live-state stats section (ucpchecker-inspired "live state") ---- */
.stats-live{ padding-top:76px; padding-bottom:8px; }   /* vertical only — keep Tailwind px-* */
.funnel{ max-width:760px; margin:40px auto 0; display:flex; flex-direction:column; gap:20px; }
.funnel-row{ display:flex; flex-direction:column; gap:9px; }
.funnel-row .fl{ display:flex; justify-content:space-between; align-items:baseline; }
.funnel-row .fl .lab{ font-size:14px; color:var(--muted); }
.funnel-row .fl b{ font-family:var(--font-mono); font-size:16px; color:var(--text-strong); font-weight:600; }
.funnel-track{ height:12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border-soft); overflow:hidden; }
/* The funnel tells a two-colour story (Memo 035 user review): the broad upstream stages
   are the cool discovery-blue, narrowing down to the warm amber "verified" payoff. */
.funnel-fill{ height:100%; border-radius:8px; background:linear-gradient(90deg,var(--amber),var(--amber-hi)); }
.funnel-fill.dim{ background:linear-gradient(90deg,color-mix(in srgb,var(--accent-2) 55%,transparent),var(--accent-2)); }
.stats-note{ text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-top:26px; letter-spacing:.04em; }

/* ---- Protocol explainer ---- */
.proto-explain{ padding-top:76px; padding-bottom:8px; }   /* vertical only — keep Tailwind px-* */
.proto-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.proto-item{ display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 18px; transition:transform .2s cubic-bezier(0,0,.2,1),border-color .2s,box-shadow .3s; }
.proto-item:hover{ transform:translateY(-3px); border-color:var(--card-ring); box-shadow:0 18px 40px -26px rgba(10,15,40,.5); }
.proto-item .pi-name{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--amber); letter-spacing:.02em; }
.proto-item .pi-n{ margin-top:9px; font-family:var(--font-mono); font-size:12px; color:var(--muted-2); }
.proto-item .pi-n b{ font-size:16px; font-weight:700; color:var(--text-strong); letter-spacing:-.01em; }
.proto-item .pi-desc{ margin-top:10px; font-size:13px; line-height:1.55; color:var(--muted); }

/* ---- Newsletter (above the footer) ---- */
.newsletter{ max-width:56rem; margin:0 auto; }
.news-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:44px 40px; text-align:center; }
.news-form{ margin:24px auto 0; max-width:460px; display:flex; gap:10px; }
.news-form input{ flex:1; background:var(--bg); border:1px solid var(--border); border-radius:9999px; padding:14px 18px; color:var(--text); font-family:var(--sans); font-size:15px; outline:none; transition:border-color .2s; }
.news-form input:focus{ border-color:var(--amber); }
.news-form button{ border:0; border-radius:9999px; padding:14px 26px; font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; background:var(--text-strong); color:var(--bg); transition:opacity .2s; }
.news-form button:hover{ opacity:.9; }
.news-micro{ font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-top:16px; letter-spacing:.03em; }

@media(max-width:900px){ .proto-grid{ grid-template-columns:repeat(2,1fr); } .news-form{ flex-direction:column; } }

/* ---- Consistent section rhythm (Memo 035 rev — spacing was uneven) ----
   VERTICAL padding only. The old `padding:92px 0` shorthand reset horizontal padding
   to 0, clobbering the Tailwind `px-6 lg:px-8` on every section — invisible on wide
   desktop (content is centred) but flush against the edge on mobile (user live review:
   "der Content-Bereich hat keinen Rand zum Browser-Ende"). Never touch horizontal here. */
.section{ padding-top:92px; padding-bottom:92px; }
.section + .section{ padding-top:0; }        /* avoid doubled gaps between stacked sections */
.section-tight{ padding-top:16px; padding-bottom:96px; }
@media(max-width:820px){ .section{ padding-top:60px; padding-bottom:60px; } }

/* ---- Protocol logo row (inside the explainer) ---- */
.proto-logos{ display:flex; align-items:center; justify-content:center; gap:clamp(30px,6vw,68px); flex-wrap:wrap; margin:30px 0 44px; }

/* ---- Chains chart (live per-chain agent distribution) ---- */
.chains-stats .section-note b{ color:var(--text-strong); font-weight:600; }
.chains-chart{ margin-top:44px; display:flex; flex-direction:column; gap:13px; }
.chn-row{ display:grid; grid-template-columns:24px 104px 1fr 76px 46px; align-items:center; gap:16px; }
/* Each chain mark sits on a uniform white chip in its NATURAL colours — robust and
   ALWAYS visible regardless of the source format (jpg/png/svg) or the logo's own
   luminance. The old amber-duotone filter washed dark logos out to invisible on the
   dark chart (user review: "mal fehlt Base, mal die anderen"). */
.chn-logo{ height:24px; width:24px; box-sizing:border-box; padding:3px; object-fit:contain; border-radius:7px; background:#fff; }
html[data-theme="light"] .chn-logo{ border:1px solid var(--border-soft); }
.chn-name{ font-size:14px; color:var(--text); white-space:nowrap; }
.chn-track{ height:11px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border-soft); overflow:hidden; }
.chn-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--amber),var(--amber-hi)); }
.chn-val{ font-family:var(--font-mono); font-size:13px; color:var(--text-strong); text-align:right; }
.chn-pct{ font-family:var(--font-mono); font-size:12px; color:var(--muted-2); text-align:right; }
@media(max-width:640px){ .chn-row{ grid-template-columns:22px 1fr 60px; gap:12px; } .chn-track,.chn-pct{ display:none; } }

/* ---- Footer polish (was too plain) ---- */
.ap-page footer{ background:var(--surface-2); }

/* ---- Connect modal (v2 port: client dropdown + tabs) ---- */
.cm-overlay{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:20px; }
.cm-overlay.is-open{ display:flex; }
.cm-scrim{ position:absolute; inset:0; background:color-mix(in srgb,#000 60%,transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cm-modal{ position:relative; width:520px; max-width:100%; background:var(--cm-bg); border:1px solid var(--card-ring); border-radius:18px; overflow:hidden; box-shadow:0 40px 100px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); font-family:var(--sans); }
.cm-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 8px; }
.cm-title{ font-family:var(--sans); font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--text-strong); }
.cm-title em{ font-family:var(--serif-display); font-style:italic; font-weight:400; color:var(--serif-accent); font-size:1.14em; }
.cm-title small{ display:block; font-family:var(--sans); font-size:13px; color:var(--muted); font-weight:400; margin-top:5px; }
.cm-x{ border:0; background:transparent; color:var(--muted-2); font-size:20px; line-height:1; cursor:pointer; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; transition:background .15s,color .15s; }
.cm-x:hover{ color:var(--text-strong); background:color-mix(in srgb,var(--text) 8%,transparent); }
/* Memo 035 P2#1: was a loud amber box around the X — align to the site's
   quiet global focus ring (keyboard-only), no longer a bright amber block. */
.cm-x:focus-visible{ outline:2px solid rgba(111,155,255,.5); outline-offset:2px; }
.cm-tabs{ display:flex; gap:8px; padding:6px 24px 0; }
.cm-tab{ padding:9px 15px; border-radius:9px 9px 0 0; font-family:var(--sans); font-size:14px; color:var(--muted); cursor:pointer; border:1px solid transparent; border-bottom:0; background:transparent; }
.cm-tab.is-active{ color:var(--text-strong); background:var(--surface); border-color:var(--border); }
.cm-tab--ucp.is-active{ color:var(--amber-hi); background:color-mix(in srgb,var(--amber) 12%,transparent); border-color:color-mix(in srgb,var(--amber) 40%,transparent); }
.cm-body{ padding:18px 24px 24px; border-top:1px solid var(--border); }
.cm-body.hidden{ display:none; }
.cm-field{ display:block; font-size:13px; color:var(--muted); margin-bottom:8px; }
/* Custom-styled select — appearance:none + our own chevron so it renders CONSISTENTLY in
   Safari (the native macOS double-arrow control was breaking there, user review). */
.cm-select{ width:100%; appearance:none; -webkit-appearance:none; background-color:color-mix(in srgb,#ffffff 5%,var(--cm-bg)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; border:1px solid var(--card-ring); border-radius:11px; padding:13px 42px 13px 15px; color:var(--text-strong); font-family:var(--sans); font-size:15px; cursor:pointer; }
.cm-select:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; border-color:transparent; }
/* Always a dark "terminal" panel — a muddy grey box on the cream light modal was
   unreadable (user live review, Memo 035). A dark code surface reads cleanly in BOTH
   themes and looks intentional. */
.cm-code{ margin-top:14px; background:#0b1220; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:14px 16px; font-family:var(--font-mono); font-size:13px; color:#cbd5e1; white-space:pre; overflow-x:auto; line-height:1.55; margin-bottom:0; }
.cm-row{ display:flex; gap:16px; margin-top:18px; align-items:center; flex-wrap:wrap; }
/* Copy config = the modal's single primary action, pill amber matching the Connect CTA. */
.cm-btn{ border:0; border-radius:9999px; padding:13px 26px; font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; background:linear-gradient(180deg,var(--amber-hi),var(--amber)); color:#1a1206; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 24px -14px rgba(245,158,11,.55); transition:transform .2s,box-shadow .2s; }
.cm-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -14px rgba(245,158,11,.65); }
.cm-hint{ flex:1; min-width:180px; font-size:13px; line-height:1.45; color:var(--muted-2); }
.cm-badge{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--amber-hi); background:color-mix(in srgb,var(--amber) 14%,transparent); padding:5px 11px; border-radius:9999px; margin-bottom:12px; }
.cm-sub{ font-size:15px; font-weight:600; color:var(--text-strong); margin-bottom:6px; }
.cm-p{ font-size:14px; color:var(--muted); line-height:1.5; margin-bottom:14px; }
.cm-flow{ font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-top:14px; line-height:1.5; }

/* ---- Newsletter (2-col: form + sample-issue card) ---- */
.news2{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:40px 44px; }
.news2 h2{ margin-top:12px; }
.news2 p{ color:var(--muted); margin-top:12px; max-width:440px; font-size:15px; line-height:1.6; }
.subrow{ display:flex; gap:10px; margin-top:22px; max-width:440px; }
.subrow input{ flex:1; background:var(--bg); border:1px solid var(--border); border-radius:9999px; padding:13px 18px; color:var(--text); font-family:var(--sans); font-size:15px; outline:none; transition:border-color .2s; }
.subrow input:focus{ border-color:var(--amber); }
.subrow button{ border:0; border-radius:9999px; padding:13px 24px; font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; background:var(--text-strong); color:var(--bg); }
.news2 .micro{ font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-top:14px; letter-spacing:.04em; }
/* Newsletter "sample issue" preview — masthead + icon rows (user: "ansprechender") */
.sample{ background:var(--bg); border:1px solid var(--card-ring); border-radius:16px; padding:0; overflow:hidden; box-shadow:0 22px 54px -32px rgba(10,15,40,.5); }
.sample__masthead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border-soft); background:color-mix(in srgb,var(--amber) 7%,transparent); }
.sample__title{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); }
.sample__issue{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--border); border-radius:9999px; padding:3px 10px; white-space:nowrap; }
.sample__list{ list-style:none; margin:0; padding:8px; }
.sample__list li{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:11px; font-size:14px; color:var(--text); transition:background .15s; }
.sample__list li + li{ margin-top:2px; }
.sample__list li:hover{ background:color-mix(in srgb,var(--text) 6%,transparent); }
.sample__ic{ flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent); }
.sample__ic svg{ width:16px; height:16px; }
@media(max-width:820px){ .news2{ grid-template-columns:1fr; gap:26px; padding:30px 26px; } .subrow{ flex-direction:column; } }

/* ---- Categories mosaic (what the servers do — proportional amber tiles) ----
   A different visual from the ranked chains bars above: each capability is a tile
   whose amber tint scales with how many servers fall in it (tint/border set inline
   by categories.js). Balanced data still reads as a lively heat-mosaic. */
/* Treemap: rectangle AREA ∝ serverCount (positions set inline by categories.js). */
.cat-treemap{ position:relative; width:100%; max-width:1040px; margin:44px auto 0; }
.cat-cell{ position:absolute; border:1px solid; border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; overflow:hidden; transition:filter .15s; }
.cat-cell:hover{ filter:brightness(1.14); }
.cat-cell__n{ font-family:var(--font-mono); font-weight:700; letter-spacing:-.01em; line-height:1; color:var(--text-strong); }
.cat-cell__name{ margin-top:5px; font-size:12px; line-height:1.25; color:var(--muted); max-width:100%; }

/* ---- Blog ---- */
.blog-meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--muted-2); text-transform:uppercase; }
.blog-h{ font-family:var(--sans); font-weight:700; font-size:clamp(26px,3.4vw,36px); line-height:1.16; letter-spacing:-.02em; color:var(--text-strong); margin-top:14px; }
.blog-h em{ font-family:var(--serif-display); font-style:italic; font-weight:400; color:var(--serif-accent); font-size:1.12em; }
.blog-post p{ margin-top:20px; font-size:17px; line-height:1.7; color:var(--muted); }
.blog-post p b{ color:var(--text); font-weight:600; }
.mono-inline{ font-family:var(--font-mono); font-size:14px; color:var(--serif-accent); }
.blog-cta{ margin-top:34px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.ghost-cta--onlight{ color:var(--text); background:var(--surface); border-color:var(--border); -webkit-backdrop-filter:none; backdrop-filter:none; }
.ghost-cta--onlight:hover{ background:color-mix(in srgb,var(--text) 8%,transparent); border-color:var(--card-ring); }

/* ---- (Newsletter sample-card list styles now live in .sample__list above) ---- */

/* ---- Solid CTA (secondary important action — no running light) ---- */
/* ---- Standard button system (Memo 035): the running-ring .shiny-cta is a SPECIAL button
   used ONCE (the hero). Everywhere else uses .solid-cta (primary) + .outline-cta (secondary),
   consistent across the whole site. ---- */
.solid-cta{ display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:9999px; font-family:var(--sans); font-size:15px; font-weight:600; color:#1a1206; background:linear-gradient(180deg,var(--amber-hi),var(--amber)); text-decoration:none; cursor:pointer; box-shadow:0 8px 24px -14px rgba(245,158,11,.5); transition:transform .2s, box-shadow .2s; border:0; }
.solid-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -14px rgba(245,158,11,.6); }
.solid-cta.is-mini{ padding:9px 18px; font-size:14px; }
/* Secondary — token-based outline, works in both themes */
.outline-cta{ display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:9999px; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--text-strong); background:transparent; border:1px solid var(--border); text-decoration:none; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.outline-cta:hover{ background:color-mix(in srgb,var(--text) 6%,transparent); border-color:var(--card-ring); transform:translateY(-1px); }
.outline-cta.is-mini{ padding:8px 16px; font-size:14px; }
/* Neutral action/submit button — ONE consistent non-amber colour site-wide (amber is
   reserved for the special Connect CTA). High-contrast: near-black on light, near-white
   on dark — a single rule, no more "sometimes black, sometimes white" (user review). */
.btn-neutral{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; border-radius:9999px; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--bg); background:var(--text-strong); text-decoration:none; cursor:pointer; border:0; transition:transform .2s,opacity .2s; }
.btn-neutral:hover{ transform:translateY(-1px); opacity:.9; }
.btn-neutral.is-mini{ padding:9px 18px; font-size:14px; }

/* ---- Header vertical rhythm ----
   The nav must breathe EQUALLY top and bottom so the Connect button sits centred in
   the bar instead of hugging either edge (user: "oben und unten sollte gleich sein").
   The inner row is a fixed h-20 flex box that already vertical-centres its children;
   the nav padding just adds symmetric outer breathing room. */
.ap-header nav{ padding-top:10px; padding-bottom:10px; }

/* ---- "Leaving AgentProbe" external-link overlay (theme-aware, Memo 035) ----
   Was a hard-coded dark card with emerald buttons — wrong in light mode and off-brand.
   Now built from the same tokens as the Connect modal; amber is the primary action. */
.ext-leave{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px;
  background:color-mix(in srgb,#000 55%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ext-leave__card{ width:100%; max-width:27rem; background:var(--cm-bg); border:1px solid var(--card-ring); border-radius:16px; padding:24px; box-shadow:0 40px 100px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); font-family:var(--sans); }
.ext-leave__row{ display:flex; align-items:flex-start; gap:14px; }
.ext-leave__ic{ margin-top:2px; flex:none; width:34px; height:34px; border-radius:9999px; display:grid; place-items:center; color:var(--amber); background:color-mix(in srgb,var(--amber) 14%,transparent); }
.ext-leave__txt{ min-width:0; flex:1; }
.ext-leave__txt h2{ font-size:16px; font-weight:700; color:var(--text-strong); }
.ext-leave__sub{ margin-top:4px; font-size:14px; color:var(--muted); }
.ext-leave__host{ margin-top:8px; word-break:break-all; font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--serif-accent); }
.ext-leave__url{ margin-top:2px; word-break:break-all; font-family:var(--font-mono); font-size:12px; color:var(--muted-2); }
.ext-leave__actions{ margin-top:22px; display:flex; justify-content:flex-end; gap:10px; }
.ext-leave__cancel{ border:1px solid var(--border); background:transparent; border-radius:10px; padding:9px 16px; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--text); cursor:pointer; transition:background .2s,border-color .2s; }
.ext-leave__cancel:hover{ background:color-mix(in srgb,var(--text) 8%,transparent); border-color:var(--card-ring); }
/* Neutral confirm — amber is reserved for the Connect CTA; a "leave site" action is not brand-CTA. */
.ext-leave__go{ border:0; border-radius:10px; padding:9px 18px; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--bg); background:var(--text-strong); cursor:pointer; transition:transform .2s,opacity .2s; }
.ext-leave__go:hover{ transform:translateY(-1px); opacity:.9; }

/* ============================================================
   Blog (Memo 035) — overview grid (FlowMCP pattern) + article
   detail (Solo Founders pattern), both theme-aware on our tokens.
   Detail uses our self-hosted Instrument Serif + National Park.
   ============================================================ */
/* ---- Overview grid — cards now lead with a cover image (every post has one) ---- */
.blog-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; text-decoration:none; transition:transform .15s cubic-bezier(0,0,.2,1),border-color .15s,box-shadow .2s; }
.blog-card:hover{ transform:translateY(-4px); border-color:var(--card-ring); box-shadow:0 24px 54px -34px rgba(10,15,40,.55); }
.blog-card__cover{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--surface-2); }
.blog-card__body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }
.blog-card__tag{ font-family:var(--font-mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--amber); }
.blog-card__title{ margin-top:12px; font-family:var(--sans); font-size:18px; font-weight:700; line-height:1.3; color:var(--text-strong); }
.blog-card__title em{ font-family:var(--serif-display); font-style:italic; font-weight:400; color:var(--serif-accent); font-size:1.1em; }
.blog-card__desc{ margin-top:8px; font-size:14px; line-height:1.5; color:var(--muted); }
.blog-card__meta{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border-soft); font-family:var(--font-mono); font-size:12px; color:var(--muted-2); }
@media(max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

/* Elegant default cover (no custom image yet) — amber glow + faint constellation grid,
   echoing the hero sky. Real covers set background-image via the post's `cover` field. */
.blog-cover--default{ position:relative; background:radial-gradient(120% 130% at 18% 6%, rgba(245,158,11,.45), transparent 56%), linear-gradient(140deg,#2a1e06,#0b1220 72%); overflow:hidden; }
.blog-cover--default::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size:22px 22px; -webkit-mask:radial-gradient(115% 95% at 50% 0,#000,transparent 72%); mask:radial-gradient(115% 95% at 50% 0,#000,transparent 72%); opacity:.55; }
.article__hero--default{ aspect-ratio:16/6.5; height:auto; border-radius:14px; }

/* Active directory tab (Tools / Projects / Protocols) — second-accent underline + text. */
.dir-tab-on{ color:var(--accent-2-strong); border-bottom-color:var(--accent-2); }

/* ---- Protocol picker pills (Memo 035 Protocols surface) ----
   The active protocol uses the second accent (--accent-2), so the discovery colour and the
   protocol navigation read as one system. */
.ap-proto-pill{ font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:9999px; padding:7px 15px; cursor:pointer; transition:color .15s,border-color .15s,background .15s; }
.ap-proto-pill:hover{ color:var(--text-strong); border-color:var(--card-ring); }
.ap-proto-pill--on{ color:var(--accent-2-strong); border-color:color-mix(in srgb,var(--accent-2) 55%,transparent); background:color-mix(in srgb,var(--accent-2) 14%,transparent); }
/* Small "experimental" marker on the UCP payment rail (transcript other--20): the UCP commerce
   surface is early / opt-in. Deliberately small + lowercase + amber so it reads as a caution/beta
   tag, distinct from the plum active-pill highlight. Lives here, not as a Tailwind arbitrary
   utility (text-[9px] is not in the prebuilt tailwind.css, so it would render full-size). */
.ap-proto-pill__exp{ display:inline-block; margin-left:6px; vertical-align:middle; font-family:var(--font-mono); font-size:9px; font-weight:600; text-transform:lowercase; letter-spacing:.04em; color:var(--accent); }
/* UCP is a STANDALONE commerce surface (transcript other--20: "eigenständig und nicht verbunden"):
   the A2A / ERC-8004 protocol picker does not compose with the commerce table, so it is greyed +
   made non-interactive while the UCP rail is active. x402 still composes, so it stays enabled. */
.ap-proto-picker--disabled{ opacity:.4; pointer-events:none; }
/* Category-detail filter controls (subcategory strip · Tools/Servers toggle · All/Paid/Free ·
   Advanced filters · Select all · Reset) use the plum discovery accent — matching the Protocols
   pills, not the site-wide amber (transcript rev-02: "wie in Protocols ... nicht so hervorstechend").
   .ap-pill-plum mirrors .ap-proto-pill--on so both filter surfaces read as one system. */
.ap-pill-plum{ border-color:color-mix(in srgb,var(--accent-2) 55%,transparent); background:color-mix(in srgb,var(--accent-2) 14%,transparent); color:var(--accent-2-strong); }
.ap-text-plum{ color:var(--accent-2-strong); }
.ap-text-plum:hover{ color:var(--accent-2); }

/* ---- Protocols table (Memo 035 P3, F14) ----
   The differentiated Protocols surface: a scannable table (Project · Protocols · Servers · Tools ·
   Grade) instead of the Projects cards. Fully token-based, so it themes in light + dark for free.
   A horizontal-scroll wrapper keeps it safe on narrow mobile. */
.ap-proto-accent{ font-family:var(--serif-display); font-style:italic; font-weight:400; color:var(--serif-accent); font-size:1.08em; }
.ap-ptable-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:14px; background:var(--surface); -webkit-overflow-scrolling:touch; }
.ap-ptable{ width:100%; min-width:680px; border-collapse:collapse; font-size:14px; }
.ap-ptable thead th{ text-align:left; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); padding:14px 18px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2); }
.ap-ptable__h-num{ text-align:right; }
.ap-ptable__h-grade{ text-align:center; }
.ap-ptable__row{ cursor:pointer; border-bottom:1px solid var(--border-soft); transition:background .12s; outline:none; }
.ap-ptable tbody tr:last-child{ border-bottom:0; }
.ap-ptable__row:hover{ background:color-mix(in srgb,var(--text) 4%,transparent); }
.ap-ptable__row:focus-visible{ background:color-mix(in srgb,var(--accent-2) 12%,transparent); box-shadow:inset 3px 0 0 var(--accent-2); }
.ap-ptable td{ padding:12px 18px; vertical-align:middle; }
.ap-ptable__proj{ display:flex; align-items:center; gap:12px; min-width:0; }
.ap-ptable__pmeta{ display:flex; flex-direction:column; min-width:0; }
.ap-ptable__name{ font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30ch; }
.ap-ptable__dom{ font-family:var(--font-mono); font-size:12px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30ch; }
.ap-ptable__tags{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.ap-proto-tag{ font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--muted); background:color-mix(in srgb,var(--text) 6%,transparent); border:1px solid var(--border); border-radius:6px; padding:2px 7px; white-space:nowrap; }
.ap-proto-tag--pay{ color:var(--accent-2-strong); background:color-mix(in srgb,var(--accent-2) 13%,transparent); border-color:color-mix(in srgb,var(--accent-2) 40%,transparent); }
/* Active protocol tag — matches the selected filter (Memo 038 Kap 13). A dominant plum fill so a
   row shows WHY it matched; stronger than --pay, which stays a subtle rail hint on non-active x402/UCP. */
.ap-proto-tag--on{ color:var(--accent-2-strong); background:color-mix(in srgb,var(--accent-2) 26%,transparent); border-color:var(--accent-2); font-weight:600; }
.ap-ptable__num{ text-align:right; font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }
.ap-ptable__grade{ text-align:center; white-space:nowrap; }
.ap-ptable__muted{ color:var(--muted-2); }

/* ---- Projects overview cards (Memo 035): fingerprint bars + amber hover ---- */
.pj-card{ transition:border-color .15s, background .15s, transform .15s; }
.pj-card:hover{ border-color:color-mix(in srgb,var(--amber) 45%,transparent); background:rgba(255,255,255,.045); transform:translateY(-2px); }
.pj-metrics{ margin-top:16px; display:grid; gap:11px; }
.pj-metric__top{ display:flex; align-items:baseline; gap:6px; }
.pj-metric__top b{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--text-strong); }
.pj-metric__top span{ font-size:12px; color:var(--muted-2); }
.pj-bar{ margin-top:5px; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.pj-bar i{ display:block; height:100%; border-radius:3px; }
.pj-bar i.is-amber{ background:linear-gradient(90deg,var(--amber),var(--amber-hi)); }
.pj-bar i.is-blue{ background:linear-gradient(90deg,var(--accent-2),var(--accent-2-strong)); }
.pj-bar i.is-dim{ background:color-mix(in srgb,var(--text) 24%,transparent); }
.pj-foot{ margin-top:14px; }

/* ---- Article detail (720px reading column, serif heads, 17px/1.6 body) ---- */
.article{ max-width:720px; margin:0 auto; padding:130px 24px 100px; }
.article__back{ display:inline-block; margin-bottom:22px; font-family:var(--font-mono); font-size:12px; color:var(--muted); text-decoration:none; }
.article__back:hover{ color:var(--text-strong); }
.article__meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.article__title{ margin-top:16px; font-family:var(--sans); font-size:clamp(32px,5vw,46px); font-weight:800; line-height:1.08; letter-spacing:-.02em; color:var(--text-strong); overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
.article__title em{ font-family:var(--serif-display); font-style:italic; font-weight:400; color:var(--serif-accent); font-size:1.06em; }
.article__byline{ margin-top:20px; display:flex; align-items:center; gap:12px; font-size:15px; color:var(--muted); }
.article__byline time{ color:var(--muted-2); }
/* Round author avatar (Memo 035 P4): the AP brand mark — a team byline, no photo needed. */
.article__avatar{ flex:none; width:38px; height:38px; border-radius:9999px; display:grid; place-items:center; font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.02em; color:#0b1220; background:linear-gradient(140deg,var(--amber-hi),var(--amber)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
.article__hero{ display:block; width:100%; height:auto; margin:36px 0 0; }
.article__body{ margin-top:36px; }
.article__body > p{ font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--text); margin-top:28px; }
.article__body > p:first-of-type::first-letter{ float:left; font-family:var(--serif-display); font-size:3.4em; line-height:.78; padding:6px 12px 0 0; color:var(--serif-accent); }
.article__body h2{ font-family:var(--serif-display); font-weight:400; font-size:28px; line-height:1.2; color:var(--text-strong); margin-top:48px; }
.article__body h3{ font-family:var(--sans); font-weight:600; font-size:19px; color:var(--text-strong); margin-top:40px; }
.article__body b{ color:var(--text-strong); font-weight:600; }
.article__body a{ color:var(--serif-accent); text-decoration:underline; text-underline-offset:2px; }
.article__body blockquote{ margin:48px 0; padding-left:20px; border-left:4px solid var(--amber); font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--text); }
.article__body code{ font-family:var(--font-mono); font-size:14px; color:var(--serif-accent); }
/* Blog/About tables + lists (Payable prohibited-category table). Token-driven → correct in both themes. */
.article__body table{ width:100%; margin:34px 0; border-collapse:collapse; font-family:var(--sans); font-size:14.5px; }
.article__body thead th{ text-align:left; padding:10px 14px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); border-bottom:1px solid var(--border); }
.article__body tbody td{ padding:11px 14px; vertical-align:top; line-height:1.5; color:var(--text); border-bottom:1px solid var(--border-soft); }
.article__body tbody tr:last-child td{ border-bottom:0; }
.article__body td:first-child{ color:var(--text-strong); font-weight:500; }
.article__body td code{ font-size:13px; color:var(--serif-accent); }
.article__body ul{ margin:22px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.article__body ul li{ position:relative; padding-left:22px; font-family:var(--sans); font-size:16px; line-height:1.55; color:var(--text); }
.article__body ul li::before{ content:""; position:absolute; left:3px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--amber); }
.article__cta{ margin-top:48px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
/* Blog end-of-post links — clean editorial text links, not big buttons (user review). */
.article__links{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border-soft); display:flex; gap:28px; flex-wrap:wrap; font-size:16px; font-weight:600; }
.article__links a{ color:var(--serif-accent); text-decoration:none; }
.article__links a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- Newsletter + footer read as ONE closed unit (user live review) ----
   Same surface, ONE divider ABOVE the newsletter to "close" the footer from the page.
   No divider between newsletter and footer (they share the surface). The copyright
   divider uses a THEME-AWARE hairline (was Tailwind border-gray-800 → near-black in
   light mode). */
.news-band{ background:var(--surface-2); padding:66px 0 72px; border-top:1px solid var(--border-soft); }
.news-band .news2{ background:transparent; border:0; padding:0; border-radius:0; }
.ap-page footer.ap-footer{ background:var(--surface-2); border-top:0; }
/* Pages WITHOUT a newsletter band above get a footer top border so there is still a
   clear content→footer transition (user review: blog had none). */
.ap-page footer.ap-footer--edge{ border-top:1px solid var(--border-soft); }
.ap-footer-rule{ border-top:1px solid var(--border-soft); }

/* Check-your-server card stays a comfortable centred width inside the 7xl section */
.checkbox-card{ max-width:760px; margin-left:auto; margin-right:auto; }
/* Chains bar chart reads better not stretched to the full 7xl column */
.chains-chart{ max-width:880px; margin-left:auto; margin-right:auto; }

/* ---- Legal / prose pages (Terms, Privacy) — Memo 035 #36 ----
   Fully token-based so they follow the theme toggle, with the site's two-font headings and
   the amber accent (they used to be hard-coded gray + indigo). A comfortable ~52rem reading
   column, left-aligned inside the 7xl page container to match About. */
.legal{ max-width:52rem; }
.legal-back{ display:inline-block; font-family:var(--font-mono); font-size:13px; color:var(--muted-2); text-decoration:none; }
.legal-back:hover{ color:var(--text-strong); }
.legal h1{ margin-top:20px; font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.6vw,46px); line-height:1.08; letter-spacing:-.02em; color:var(--text-strong); }
.legal h1 em{ font-family:var(--serif-display); font-weight:400; font-style:italic; color:var(--serif-accent); font-size:1.18em; letter-spacing:0; }
.legal-meta{ margin-top:12px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); }
.legal section{ margin-top:38px; }
.legal h2{ display:flex; align-items:baseline; gap:12px; font-family:var(--sans); font-weight:600; font-size:19px; color:var(--text-strong); }
.legal h2 .legal-num{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--accent); flex:none; }
.legal p{ margin-top:12px; color:var(--muted); line-height:1.72; font-size:16px; }
.legal a{ color:var(--accent); text-decoration:none; }
.legal a:hover{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   Memo 035 P1 — Site-wide consistency bridge.
   Purpose: make the directory SPA (tools/projects/protocols) and the
   validate/lookup/about pages part of ONE design language on BOTH
   themes, without rewriting the 271 KB directory.js template strings.

   (a) Legacy INDIGO accent -> AMBER brand token, both themes.
       style.css loads AFTER tailwind.css, so a bare utility selector
       wins by source order — no !important needed.
   (b) Hard-coded GRAY utilities -> tokens, LIGHT theme only. In dark
       the grays already equal the :root dark tokens by construction
       (--bg == gray-950, --text == gray-100, ...), so only the light
       theme was broken ("body stays dark"). Scoping under
       html[data-theme="light"] beats Tailwind's single-class rule and
       leaves the approved dark design byte-for-byte untouched.
   ============================================================ */

/* (a) indigo (old accent) -> amber ---------------------------------- */
.text-indigo-400, .text-indigo-300, .text-indigo-500,
.text-indigo-400\/80, .text-indigo-300\/60{ color:var(--accent-strong); }
.bg-indigo-500{ background-color:var(--accent); color:var(--bg); }
.hover\:bg-indigo-400:hover{ background-color:var(--accent-strong); }
.hover\:text-indigo-300:hover{ color:var(--accent); }
/* group-hover indigo (category-card title hover) was never bridged -> periwinkle #93B4FF blue
   leak (Memo 038 Kap 3, the blue the user rejected). Map it onto the accent like every other
   indigo link: amber in dark, plum in light (the light override is in the Memo 038 P1 block). */
.group:hover .group-hover\:text-indigo-300{ color:var(--accent-strong); }
.bg-indigo-500\/10, .bg-indigo-500\/15, .bg-indigo-500\/20{ background-color:color-mix(in srgb, var(--accent) 14%, transparent); }
.border-indigo-500, .border-indigo-500\/30, .border-indigo-500\/40,
.focus\:border-indigo-500:focus{ border-color:var(--accent); }
.shadow-indigo-500\/25{ --tw-shadow-color:color-mix(in srgb, var(--accent) 25%, transparent); box-shadow:0 10px 24px -12px color-mix(in srgb, var(--accent) 45%, transparent); }
.ring-indigo-500, .ring-indigo-500\/30{ --tw-ring-color:var(--accent); }

/* (b) gray utilities -> tokens, LIGHT theme only -------------------- */
html[data-theme="light"] .bg-gray-950{ background-color:var(--bg); }
html[data-theme="light"] .bg-gray-900,
html[data-theme="light"] .bg-gray-900\/95,
html[data-theme="light"] .bg-gray-900\/90,
html[data-theme="light"] .bg-gray-900\/60,
html[data-theme="light"] .bg-gray-900\/50,
html[data-theme="light"] .bg-gray-900\/40,
html[data-theme="light"] .bg-gray-900\/30{ background-color:var(--surface); }
html[data-theme="light"] .bg-gray-800,
html[data-theme="light"] .bg-gray-800\/60,
html[data-theme="light"] .bg-gray-800\/50{ background-color:var(--surface-2); }
html[data-theme="light"] .text-gray-50,
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200{ color:var(--text-strong); }
html[data-theme="light"] .text-gray-300{ color:var(--text); }
html[data-theme="light"] .text-gray-400{ color:var(--muted); }
html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-gray-600,
html[data-theme="light"] .text-gray-700{ color:var(--muted-2); }
html[data-theme="light"] .border-gray-800,
html[data-theme="light"] .border-gray-800\/60,
html[data-theme="light"] .border-gray-800\/50,
html[data-theme="light"] .border-gray-800\/40,
html[data-theme="light"] .border-gray-800\/30,
html[data-theme="light"] .border-gray-700,
html[data-theme="light"] .border-gray-600,
html[data-theme="light"] .border-gray-600\/40,
html[data-theme="light"] .border-gray-500,
html[data-theme="light"] .border-gray-500\/40,
html[data-theme="light"] .border-gray-500\/30,
html[data-theme="light"] .border-gray-500\/20{ border-color:var(--border); }
html[data-theme="light"] .divide-gray-800\/50 > :not([hidden]) ~ :not([hidden]){ border-color:var(--border); }
html[data-theme="light"] .placeholder-gray-500::placeholder,
html[data-theme="light"] .placeholder-gray-600::placeholder{ color:var(--muted-2); }
/* Headings on the static token pages use text-white; it must follow the
   theme on a light bg. Scoped by data-page so index/blog/directory badges
   (colored pills that legitimately keep white text) are never touched. */
html[data-theme="light"] body[data-page="validate"] .text-white,
html[data-theme="light"] body[data-page="lookup"] .text-white,
html[data-theme="light"] body[data-page="about"] .text-white{ color:var(--text-strong); }
/* directory pagination/nav buttons use hover:text-white — that reads as
   white-on-light in the light theme; darken the hover instead. */
html[data-theme="light"] body[data-page="directory"] .hover\:text-white:hover{ color:var(--text-strong); }

/* ============================================================
   Memo 038 P1 — Final-sweep: type scale (F4=B) + light-theme
   colour consistency (F3 plum). Every colour rule below is
   html[data-theme="light"]-scoped, so the approved DARK design is
   byte-identical; the type scale is a global additive token system.
   Root cause: the light remap (style.css:744-754 / 1331-1385) never
   re-darkened the amber TEXT tokens nor the emerald/hover-gray/chart
   literals, so they rendered bright on cream (the sweep's colour
   complaints — Kap 1/2/3/5/6/8). Fix is purely additive.
   ============================================================ */

/* (0) Type scale (F4=B): a real 15px base + a 12px floor. Applied as an
   ABSOLUTE size on the page wrapper, never on :root/html — that would
   rescale every Tailwind rem utility. Detail pages were dominated by
   9-11px text (user: "site-weit zu klein, v.a. Detailseiten"). */
:root{ --fs-base:15px; --fs-sm:13px; --fs-xs:12px; }
.ap-page{ font-size:var(--fs-base); }
.text-\[7px\], .text-\[9px\], .text-\[10px\], .text-\[11px\]{ font-size:12px; }

/* (1) Systemic multiplier: the indigo->amber TEXT bridge (style.css:1332/1335)
   resolves to PLUM on light (F3: ONE link/accent colour = plum #6d5a92). The
   amber FILL/border/ring bridge rules are left untouched (those are correct). */
html[data-theme="light"] .text-indigo-400,
html[data-theme="light"] .text-indigo-300,
html[data-theme="light"] .text-indigo-500,
html[data-theme="light"] .text-indigo-400\/80,
html[data-theme="light"] .text-indigo-300\/60{ color:var(--accent-2); }
html[data-theme="light"] .hover\:text-indigo-300:hover{ color:var(--accent-2-strong); }
html[data-theme="light"] .group:hover .group-hover\:text-indigo-300{ color:var(--accent-2-strong); }

/* (2) A2A links carry a persistent literal blue that was never remapped -> plum too (F3). */
html[data-theme="light"] .text-blue-300,
html[data-theme="light"] .text-blue-400,
html[data-theme="light"] .text-blue-500,
html[data-theme="light"] .hover\:text-blue-300:hover,
html[data-theme="light"] .hover\:text-blue-200:hover{ color:var(--accent-2); }

/* (3) Literal amber text = status/caution semantic (Not yet validated, Offline,
   stale, x402/Paid chips). Darken to amber-700 for AA contrast on cream — keeps
   the warning hue, not a bright yellow-on-white. */
html[data-theme="light"] .text-amber-400,
html[data-theme="light"] .text-amber-300,
html[data-theme="light"] .text-amber-500,
html[data-theme="light"] .text-amber-400\/80,
html[data-theme="light"] .text-amber-400\/90,
html[data-theme="light"] .text-yellow-400,
html[data-theme="light"] .text-yellow-300,
html[data-theme="light"] .text-yellow-500{ color:#b45309; }

/* (4) Green status literals -> the light --success (#0f9d63); emerald-400
   (#34d399) was ~1.4:1 on cream (Kap 5). */
html[data-theme="light"] .text-emerald-400,
html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-400\/90{ color:var(--success); }

/* (5) Hover-gray fills drowned the row text on light (Kap 6). The non-hover
   gray bridge (1344-1350) missed the :hover variants -> apply the Protocols-table
   pattern (a 4% text tint). hover:bg-white would be white-on-white on light. */
html[data-theme="light"] .hover\:bg-gray-900\/60:hover,
html[data-theme="light"] .hover\:bg-gray-900\/40:hover,
html[data-theme="light"] .hover\:bg-gray-900\/30:hover,
html[data-theme="light"] .hover\:bg-gray-800\/60:hover,
html[data-theme="light"] .hover\:bg-white:hover,
html[data-theme="light"] .hover\:bg-white\/5:hover{ background-color:color-mix(in srgb,var(--text) 4%,transparent); }

/* (6) Named amber-as-text offenders -> plum (links / nav / discovery labels, F3).
   The serif-accent editorial accents (em headings, article prose, .dir-tab-on,
   .ap-proto-pill--on) are already legible on light -> left untouched. */
html[data-theme="light"] .ap-nav-link--active{ color:var(--accent-2-strong); }
html[data-theme="light"] .proto-item .pi-name{ color:var(--accent-2-strong); }
html[data-theme="light"] .triad__n{ color:var(--accent-2-strong); }
html[data-theme="light"] .worldbox__body .eyebrow{ color:var(--accent-2-strong); }
html[data-theme="light"] .blog-card__tag{ color:var(--accent-2-strong); }
html[data-theme="light"] .sample__title{ color:var(--accent-2-strong); }
html[data-theme="light"] .endpoint-link{ color:var(--accent-2); }
html[data-theme="light"] .endpoint-link:hover{ color:var(--accent-2-strong); }
html[data-theme="light"] .agent-uri-links code{ color:var(--accent-2); }
html[data-theme="light"] .c-key{ color:var(--accent-2-strong); }
html[data-theme="light"] .c-url{ color:var(--accent-2); }
html[data-theme="light"] .legal h2 .legal-num{ color:var(--accent-2-strong); }
html[data-theme="light"] .legal a{ color:var(--accent-2); }
html[data-theme="light"] .legal a:hover{ color:var(--accent-2-strong); }
/* diff "changed" + pending-check icon keep the caution hue, darkened for light. */
html[data-theme="light"] .diff-changed{ color:#b45309; }
html[data-theme="light"] .check-unknown{ color:#b45309; }

/* (7) Discovery graph: keep it an intentional DARK panel in BOTH themes (like
   .cm-code). The light gray-bridge turned #project-graph's bg-gray-950 light,
   washing out its bright grade/type nodes + light-drawn labels (Kap 8). ID
   selector outranks the .bg-gray-950 bridge rule. */
html[data-theme="light"] #project-graph{ background-color:#030712; border-color:rgba(255,255,255,.08); }

/* Memo 038 Kap 9: kill the rubber-band overscroll on the FRONTPAGE only. Pulling past the top
   dragged the fixed hero image down and exposed a white gap, breaking the illusion. Research (RA7):
   there was no overscroll rule in the code and no commit for it — the "already fixed" state was
   never committed, so this is a new add. Scoped to the home page via html.ap-home (index.html), set
   on the root element because overscroll-behavior does NOT propagate from <body> to the viewport. */
html.ap-home{ overscroll-behavior-y:none; }

/* ============================================================
   Memo 038 P4 (Kap 14 / 15 / 16) — Content & Env polish.
   Purely additive; token-based so it themes in light + dark.
   ============================================================ */

/* (Kap 15 / T039) Footer per-link env tag: marks each footer link PRODUCTION vs DEV/STAGING-only.
   Subtle by design — a muted mono micro-tag; the DEV-only variant gets a hairline pill so it reads
   as distinct without a loud colour (user: keep it muted). */
.ap-foot-env{ display:inline-block; margin-left:7px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); vertical-align:middle; }
.ap-foot-env--dev{ padding:0 6px; border:1px solid var(--border); border-radius:6px; }

/* (Kap 14) About — protocol distribution tiles: compact live tiles (name + count) filled by
   js/protocols.js from /data/protocols-a.json. Plum = the discovery / secondary accent. The 720px
   article column is too narrow for the 5-col frontpage explainer, so About uses this tighter grid. */
.about-protos{ margin-top:30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.about-proto{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
.about-proto__name{ font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--accent-2-strong); }
.about-proto__n{ margin-top:8px; font-family:var(--font-mono); font-size:12px; color:var(--muted-2); }
.about-proto__n b{ font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--text-strong); }

/* About — "What makes a server pass": the three live checks as one assessment card, then the
   Grade-A gate as its payoff. Methodology visual (no fabricated numbers), token-driven so it reads
   correctly in both themes. The amber check + amber badge tie it to the trust-funnel accent above. */
.assess{ margin-top:34px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.assess__row{ display:flex; gap:15px; padding:20px 22px; }
.assess__row + .assess__row{ border-top:1px solid var(--border-soft); }
.assess__mark{ flex:none; width:26px; height:26px; margin-top:1px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--amber); background:color-mix(in srgb, var(--amber) 15%, transparent); }
.assess__mark svg{ width:15px; height:15px; }
.assess__label{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--text-strong); }
.assess__text p{ margin-top:5px; font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--muted); }

.assess-gate{ margin-top:22px; display:flex; gap:18px; align-items:flex-start; padding:22px 24px; border-radius:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--amber) 9%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--amber) 34%, var(--border)); }
.assess-gate__badge{ flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif-display); font-size:25px; font-weight:700; color:#030712; background:linear-gradient(135deg, var(--amber), var(--amber-hi));
  box-shadow:0 6px 18px -8px rgba(245,158,11,.7); }
.assess-gate__title{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--text-strong); }
.assess-gate__text p{ margin-top:6px; font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--text); }

/* (Kap 16) Agent-URI JSON preview = an always-dark terminal panel. The old rgba(0,0,0,.3) fill read
   as a muddy grey-on-grey box on the cream light theme (user live review); mirroring the .cm-code
   pattern makes it read cleanly and look intentional in BOTH themes. Overrides the base rule above
   by source order. */
.agent-uri-json{ background:#0b1220; border-color:rgba(255,255,255,.08); }
.agent-uri-json code{ color:#cbd5e1; }