/* =================================================================
 * PAI Links Page — pure CSS, no Tailwind runtime.
 * Visual parity with linkPage/index.html.
 * Built on the original Tailwind utility set (zinc 950/900, green 400/500,
 * black/30/40/50, white/5/10, antialiased Inter). Semantic class names.
 * ================================================================= */

/* ---------- 1. Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

/* ---------- 2. Design tokens (Tailwind defaults we use) ---------- */
:root {
    --color-black-30:   rgba(0, 0, 0, 0.30);
    --color-black-40:   rgba(0, 0, 0, 0.40);
    --color-black-50:   rgba(0, 0, 0, 0.50);
    --color-white:      #ffffff;
    --color-white-5:    rgba(255, 255, 255, 0.05);
    --color-white-10:   rgba(255, 255, 255, 0.10);
    --color-white-20:   rgba(255, 255, 255, 0.20);
    --color-white-25:   rgba(255, 255, 255, 0.25);
    --color-green-300:  #86efac;
    --color-green-400:  #4ade80;
    --color-green-500:  #22c55e;
    --color-red-400:    #f87171;
    --color-red-900-10: rgba(127, 29, 29, 0.1);
    --color-zinc-300:   #d4d4d8;
    --color-zinc-400:   #a1a1aa;
    --color-zinc-500:   #71717a;
    --color-zinc-900:   #18181b;
    --color-zinc-950:   #09090b;

    --radius-sm:   6px;
    --radius:      8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 3. Resets / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background-color: var(--color-zinc-950);
    color: var(--color-white);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Safe scroll padding for anchored links */
[id] { scroll-margin-top: 80px; }

.logo-font { font-family: 'Space Grotesk', sans-serif; }

/* ---------- 4. Layout primitives ---------- */
.container { max-width: 64rem; margin-left: auto; margin-right: auto; }
.app-preview { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: block; max-width: 520px; margin-left: auto; margin-right: auto; }
@media (hover: hover) {
    .app-preview:hover { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.3); }
}
.preview-link { background-color: var(--color-zinc-900); border: 1px solid var(--color-white-10); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
@media (min-width: 640px) { .preview-link { border-radius: var(--radius-3xl); } }

/* ---------- 5. Typography ---------- */
.h-2xl { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.h-xl  { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.h-lg  { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.h-base{ font-size: 1rem; font-weight: 500; line-height: 1.5; }
.t-base { font-size: 1rem; }
.t-sm   { font-size: 0.875rem; }
.t-xs   { font-size: 0.75rem; }
.t-xxs  { font-size: 0.6875rem; }   /* ~11px */
.t-3xs  { font-size: 0.625rem; }   /* 10px */
.t-4xs  { font-size: 0.5625rem; }  /* 9px */
.t-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.t-semibold { font-weight: 600; }
.t-medium   { font-weight: 500; }
.t-normal   { font-weight: 400; }

@media (min-width: 640px) {
    .h-2xl { font-size: 1.875rem; line-height: 1.2; }   /* text-3xl */
    .h-xl  { font-size: 1.5rem;  line-height: 1.2; }   /* text-2xl */
    .h-lg  { font-size: 1.125rem; line-height: 1.4; }
    .t-base { font-size: 1rem; }
    .t-sm   { font-size: 0.875rem; }
    .t-xs   { font-size: 0.75rem; }
    .t-xxs  { font-size: 0.6875rem; }
    .t-3xs  { font-size: 0.625rem; }
    .lead-snug    { line-height: 1.375; }
    .lead-normal  { line-height: 1.5; }
}

/* ---------- 6. Colours (semantic) ---------- */
.c-green-400 { color: var(--color-green-400); }
.c-green-300 { color: var(--color-green-300); }
.c-zinc-400  { color: var(--color-zinc-400); }
.c-zinc-300  { color: var(--color-zinc-300); }
.c-zinc-500  { color: var(--color-zinc-500); }
.c-white     { color: var(--color-white); }
.c-black     { color: #000; }
.c-red-400   { color: var(--color-red-400); }

.bg-green-400     { background-color: var(--color-green-400); }
.bg-green-400-10  { background-color: rgba(74, 222, 128, 0.10); }
.bg-green-400-15  { background-color: rgba(74, 222, 128, 0.15); }
.bg-green-500     { background-color: var(--color-green-500); }
.bg-zinc-900      { background-color: var(--color-zinc-900); }
.bg-zinc-950      { background-color: var(--color-zinc-950); }
.bg-black-30      { background-color: var(--color-black-30); }
.bg-black-40      { background-color: var(--color-black-40); }
.bg-black-50      { background-color: var(--color-black-50); }
.bg-white-5       { background-color: var(--color-white-5); }
.bg-white-10      { background-color: var(--color-white-10); }
.bg-red-900-10    { background-color: var(--color-red-900-10); }

.b-green-400-30 { border-color: rgba(74, 222, 128, 0.30); }
.b-green-400-40 { border-color: rgba(74, 222, 128, 0.40); }
.b-green-400-20 { border-color: rgba(74, 222, 128, 0.20); }
.b-red-400-30   { border-color: rgba(248, 113, 113, 0.30); }
.b-white-10     { border-color: var(--color-white-10); }
.b-white-5      { border-color: var(--color-white-5); }

.ring-green-400-20 { box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.20); }

/* ---------- 7. Spacing (only the gaps we use) ---------- */
.s-1 { padding: 0.25rem; }
.s-2 { padding: 0.5rem; }
.s-2\.5 { padding: 0.625rem; }
.s-3 { padding: 0.75rem; }
.s-4 { padding: 1rem; }
.s-5 { padding: 1.25rem; }
.s-6 { padding: 1.5rem; }
.s-7 { padding: 1.75rem; }
.s-8 { padding: 2rem; }

.sx-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.sx-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.sx-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.sx-4 { padding-left: 1rem;    padding-right: 1rem; }
.sx-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.sx-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.sx-8 { padding-left: 2rem;    padding-right: 2rem; }
.sy-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.sy-1   { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.sy-2   { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.sy-3   { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.sy-4   { padding-top: 1rem;     padding-bottom: 1rem; }
.sy-5   { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
.sy-6   { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
.sx-py-px { padding-top: 1px; padding-bottom: 1px; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-auto { margin-bottom: auto; }

.ml-1\.5 { margin-left: 0.375rem; }
.-mr-2   { margin-right: -0.5rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-5px  { margin-top: 5px; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- 8. Responsive overrides (sm 640px+) ---------- */
@media (min-width: 640px) {
    .sx-3\@sm { padding-left: 0.75rem; padding-right: 0.75rem; }
    .sx-4\@sm { padding-left: 1rem;    padding-right: 1rem; }
    .sx-6\@sm { padding-left: 1.5rem;  padding-right: 1.5rem; }
    .sx-8\@sm { padding-left: 2rem;    padding-right: 2rem; }

    .sy-4\@sm { padding-top: 1rem;     padding-bottom: 1rem; }
    .sy-5\@sm { padding-top: 1.25rem;  padding-bottom: 1.25rem; }

    .s-4\@sm { padding: 1rem; }
    .s-6\@sm { padding: 1.5rem; }
    .s-7\@sm { padding: 1.75rem; }
    .s-8\@sm { padding: 2rem; }

    .mt-0\@sm  { margin-top: 0; }
    .mt-4\@sm  { margin-top: 1rem; }
    .mt-5\@sm  { margin-top: 1.25rem; }
    .mt-6\@sm  { margin-top: 1.5rem; }
    .mt-8\@sm  { margin-top: 2rem; }
    .mt-12\@sm { margin-top: 3rem; }
    .mt-16\@sm { margin-top: 4rem; }
    .mt-20\@sm { margin-top: 5rem; }

    .mb-4\@sm { margin-bottom: 1rem; }
    .mb-6\@sm { margin-bottom: 1.5rem; }
    .mb-8\@sm { margin-bottom: 2rem; }

    .pt-8\@sm  { padding-top: 2rem; }
    .pt-12\@sm { padding-top: 3rem; }
}

/* ---------- 9. Hover / focus ---------- */
.hover-c-green-400:hover { color: var(--color-green-400); }
.hover-c-green-300:hover { color: var(--color-green-300); }
.hover-c-green-400-underline:hover { color: var(--color-green-400); text-decoration: underline; }
.hover-bg-white-5:hover { background-color: var(--color-white-5); }
.hover-bg-white-20:hover { background-color: var(--color-white-20); }
.hover-bg-green-400-10:hover { background-color: rgba(74, 222, 128, 0.10); }
.hover-bg-green-400-15:active { background-color: rgba(74, 222, 128, 0.15); }
.active-bg-white-10:active { background-color: var(--color-white-10); }
.active-bg-white-25:active { background-color: var(--color-white-25); }
.transition-colors { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.transition-all    { transition: all 0.2s ease; }
.group:hover .group-hover\:bg-green-400-10 { background-color: rgba(74, 222, 128, 0.10); }
.hover-brightness-110:hover { filter: brightness(1.1); }

/* ---------- 10. Visibility helpers ---------- */
.hidden { display: none; }
.block  { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.shrink-0 { flex-shrink: 0; }
.min-w-0   { min-width: 0; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }
.whitespace-nowrap { white-space: nowrap; }
.select-none { -webkit-user-select: none; user-select: none; }
.select-all  { -webkit-user-select: all; user-select: all; }
.cursor-pointer { cursor: pointer; }
.text-center   { text-align: center; }
.opacity-90    { opacity: 0.9; }
.opacity-60    { opacity: 0.6; }
.break-all     { word-break: break-all; }

/* Responsive show/hide */
@media (min-width: 640px)  { .sm\:hidden { display: none; } }
@media (min-width: 768px)  { .md\:hidden { display: none; } .md\:flex   { display: flex; } }
@media (min-width: 1024px) { .lg\:hidden { display: none; } }

/* Hide on small screens, show on larger */
@media (min-width: 768px)  { .sm\:flex { display: flex; } }

/* ---------- 11. Flex helpers ---------- */
.flex-row    { flex-direction: row; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center       { justify-content: center; }
.justify-between      { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-x-1\.5 { column-gap: 0.375rem; }
.gap-x-2    { column-gap: 0.5rem; }
.gap-x-3    { column-gap: 0.75rem; }
.gap-x-4    { column-gap: 1rem; }
.gap-x-6    { column-gap: 1.5rem; }
.gap-y-1    { row-gap: 0.25rem; }
.gap-y-2    { row-gap: 0.5rem; }

.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3   > * + * { margin-top: 0.75rem; }
.space-y-4   > * + * { margin-top: 1rem; }

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-start { align-items: flex-start; }
    .sm\:items-center { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:gap-0   { gap: 0; }
    .sm\:gap-3   { gap: 0.75rem; }
    .sm\:gap-4   { gap: 1rem; }
    .sm\:gap-6   { gap: 1.5rem; }
    .sm\:gap-x-4 { column-gap: 1rem; }
    .sm\:space-y-3 > * + * { margin-top: 0.75rem; }
    .sm\:space-y-4 > * + * { margin-top: 1rem; }
}
@media (min-width: 768px) {
    .md\:gap-x-6 { column-gap: 1.5rem; }
    .md\:gap-x-8 { column-gap: 2rem; }
}
@media (min-width: 1024px) {
    .lg\:gap-x-8 { column-gap: 2rem; }
}

/* ---------- 12. Grid layouts used ---------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 13. Width / height ---------- */
.w-2  { width: 0.5rem; }
.w-4  { width: 1rem; }
.w-5  { width: 1.25rem; }
.w-11 { width: 2.75rem; }
.w-full { width: 100%; }
.h-2  { height: 0.5rem; }
.h-4  { height: 1rem; }
.h-8  { height: 2rem; }
.h-9  { height: 2.25rem; }
.h-11 { height: 2.75rem; }
.h-\[2px\] { height: 2px; }
@media (min-width: 640px) {
    .sm\:h-10 { height: 2.5rem; }
    .sm\:w-auto { width: auto; }
}

/* ---------- 14. Borders + radius ---------- */
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-0 { border: 0; }

.rounded     { border-radius: var(--radius); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full{ border-radius: var(--radius-full); }
@media (min-width: 640px) {
    .sm\:rounded-3xl { border-radius: var(--radius-3xl); }
}

/* ---------- 15. Shadows ---------- */
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* ---------- 16. Components ---------- */

/* 16.1 Green gradient CTA button */
.green-button {
    background: linear-gradient(90deg, #22c55e, #86efac);
    border-radius: var(--radius-3xl);
    padding: 0.4rem;
    color: #000;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.green-button:hover { filter: brightness(1.1); }

/* 16.2 Older-versions collapsible */
.older-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius-2xl);
    color: var(--color-zinc-400);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.older-toggle:hover, .older-toggle:active {
    color: var(--color-green-300);
    background-color: var(--color-white-5);
}
.older-toggle:active { background-color: var(--color-white-10); }
.chevron { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.5rem; line-height: 1; user-select: none; }
.older-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.older-content.show { max-height: 2000px; }

/* 16.3 Radicle node card */
.node-card {
    background-color: var(--color-zinc-900);
    border: 1px solid var(--color-white-10);
    border-radius: var(--radius-2xl);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) { .node-card { padding: 1.25rem; border-radius: var(--radius-3xl); } }
@media (min-width: 1024px) { .node-card { padding: 1.25rem; border-radius: var(--radius-3xl); } }

@media (hover: hover) {
    .node-card:hover {
        transform: translateY(-2px);
        border-color: var(--color-green-300);
    }
}

.node-card.tier-manual   { border-color: rgba(74, 222, 128, 0.20); }
.node-card.tier-bookmark { border-color: var(--color-white-5); opacity: 0.6; }
.node-card.tier-bookmark .node-name,
.node-card.tier-bookmark .node-desc,
.node-card.tier-bookmark .url-pill { color: var(--color-zinc-500); }
.node-card.tier-routed   { border-color: var(--color-white-10); }
.node-card.tier-routed.status-latest    { border-color: rgba(74, 222, 128, 0.55); box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.40), 0 0 0 6px rgba(74, 222, 128, 0.10); }

.tier-badge {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.5625rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.25rem;
}
.tier-badge.legacy   { background-color: var(--color-white-5); color: var(--color-zinc-500); }
/* legacy only kept around in case older builds still emit it; safe to drop. */

/* 16.4 Live-version cards (latest + older) */
.version-card {
    background-color: var(--color-zinc-900);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 640px) {
    .version-card { padding: 2rem; border-radius: var(--radius-3xl); flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
}
.version-card.latest { border: 1px solid rgba(74, 222, 128, 0.30); }
.version-card.opacity-90 { opacity: 0.9; }

.version-card .meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.version-card .actions { width: 100%; }
@media (min-width: 640px) {
    .version-card .actions { width: auto; flex-shrink: 0; }
}
.version-card .pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: rgba(74, 222, 128, 0.10);
    color: var(--color-green-400);
    border-radius: var(--radius-3xl);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .version-card .pill { padding: 0.25rem 1rem; font-size: 0.875rem; } }

.cta-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-3xl);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    width: 100%;
}
@media (min-width: 640px) {
    /* Desktop: generous padding so the text doesn't look squished. */
    .cta-launch { padding: 1rem 2.75rem; font-size: 1.125rem; width: auto; min-height: 3.5rem; }
}
/* Header CTAs (top-right) – a touch tighter than the hero CTA. */
.header-cta { padding: 0.625rem 1.25rem; font-size: 0.875rem; border-radius: var(--radius-3xl); }
@media (min-width: 640px) { .header-cta { padding: 0.75rem 1.75rem; font-size: 1rem; } }

.cta-launch.primary { background: linear-gradient(90deg, #22c55e, #86efac); color: #000; }
.cta-launch.secondary { background-color: var(--color-white-10); color: var(--color-white); }
.cta-launch.secondary:hover  { background-color: var(--color-white-20); }
.cta-launch.secondary:active { background-color: var(--color-white-25); }

/* 16.5 CID block + footer panel inside a version card */
.cid-panel {
    margin-top: 1rem;
    border: 1px solid var(--color-white-10);
    border-radius: var(--radius-2xl);
    padding: 1rem;
}
@media (min-width: 640px) { .cid-panel { padding: 1.5rem; margin-top: 1.5rem; } }
.cid-panel .head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}
@media (min-width: 640px) {
    .cid-panel .head { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; margin-bottom: 1rem; }
}
.cid-panel .head .label { font-weight: 500; font-size: 0.875rem; }
.cid-panel .head .badge { font-size: 0.625rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-green-400); }
@media (min-width: 640px) {
    .cid-panel .head .label { font-size: 1rem; }
    .cid-panel .head .badge { font-size: 0.75rem; }
}
.cid-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    background-color: var(--color-zinc-950);
    padding: 0.75rem;
    border-radius: var(--radius-2xl);
    word-break: break-all;
    line-height: 1.625;
    user-select: all;
}
@media (min-width: 640px) { .cid-block { font-size: 0.75rem; padding: 1rem; } }
.cid-panel .open-gateway {
    margin-top: 1rem;
    display: block;
    text-align: center;
    color: var(--color-green-400);
    font-size: 0.75rem;
    font-weight: 500;
}
@media (min-width: 640px) { .cid-panel .open-gateway { margin-top: 1.5rem; font-size: 0.875rem; } }
.cid-panel .open-gateway:hover { color: var(--color-green-300); }
.cid-panel .verify-note {
    font-size: 0.5625rem;
    color: var(--color-zinc-400);
    margin-top: 0.75rem;
    line-height: 1.625;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
@media (min-width: 640px) { .cid-panel .verify-note { font-size: 0.625rem; margin-top: 1rem; } }

/* 16.6 Hamburger button + lines */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    border-radius: var(--radius-2xl);
    background: transparent;
    border: 0;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.hamburger:hover { background-color: var(--color-white-5); }
.hamburger:active { background-color: var(--color-white-10); }
.hamburger .hamburger-line {
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}
.hamburger .hamburger-line + .hamburger-line { margin-top: 5px; }
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 16.7 Mobile menu dropdown */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    opacity: 0;
}
.mobile-menu.open { max-height: 400px; opacity: 1; }
.mobile-menu a { -webkit-tap-highlight-color: transparent; display: block; padding: 0.75rem 1rem; border-radius: var(--radius-2xl); font-size: 0.875rem; font-weight: 500; transition: background-color 0.2s ease; }
.mobile-menu a:hover { background-color: var(--color-white-5); }
.mobile-menu a:active { background-color: var(--color-white-10); }

/* 16.8 Banner ("Decentralization, robustness, privacy") */
.banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: var(--color-green-500);
    color: #000;
    border-radius: var(--radius-2xl);
    padding: 1rem 1.25rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
@media (min-width: 640px) {
    .banner { align-items: center; gap: 1rem; padding: 1.25rem 2rem; border-radius: var(--radius-3xl); }
}
.banner .icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; }
@media (min-width: 640px) { .banner .icon { font-size: 1.5rem; margin-top: 0; } }
.banner .text { font-weight: 600; font-size: 0.875rem; line-height: 1.375; }
@media (min-width: 640px) { .banner .text { font-size: 1rem; line-height: 1.5; } }

/* 16.9 Version badge */
.version-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    row-gap: 0.25rem;
    background-color: var(--color-white-5);
    border: 1px solid var(--color-white-10);
    border-radius: var(--radius-3xl);
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}
@media (min-width: 640px) { .version-badge { padding: 0.5rem 1.5rem; font-size: 0.875rem; } }
.version-badge .pulse-dot {
    width: 0.5rem; height: 0.5rem;
    background-color: var(--color-green-400);
    border-radius: var(--radius-full);
    animation: pulse 1s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* 16.10 Disclaimers */
.disclaimer {
    border: 1px solid rgba(248, 113, 113, 0.30);
    background-color: rgba(127, 29, 29, 0.10);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
}
@media (min-width: 640px) { .disclaimer { padding: 2rem; border-radius: var(--radius-3xl); } }
.disclaimer h2 {
    color: var(--color-red-400);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .disclaimer h2 { font-size: 1.125rem; margin-bottom: 1rem; }
}
.disclaimer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
@media (min-width: 640px) { .disclaimer ul { gap: 0.75rem; } }
.disclaimer li { display: flex; gap: 0.5rem; font-size: 0.75rem; color: var(--color-zinc-300); }
@media (min-width: 640px) { .disclaimer li { font-size: 0.875rem; } }
.disclaimer li::before { content: "•"; color: var(--color-red-400); flex-shrink: 0; }

/* 16.11 Self-host cards (Radicle primary, build, verify) */
.selfhost-card {
    background-color: var(--color-zinc-900);
    border: 1px solid var(--color-white-10);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
@media (min-width: 640px) { .selfhost-card { padding: 2rem; border-radius: var(--radius-3xl); } }
.selfhost-card.clickable:hover  { background-color: rgba(74, 222, 128, 0.10); }
.selfhost-card.clickable:active{ background-color: rgba(74, 222, 128, 0.15); }
.selfhost-card.plain:hover      { background-color: var(--color-white-5); }
.selfhost-card .label { color: var(--color-green-400); font-size: 0.875rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .selfhost-card .label { font-size: 1rem; margin-bottom: 1.5rem; } }
.selfhost-card .title { font-size: 1.125rem; font-weight: 500; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .selfhost-card .title { font-size: 1.25rem; margin-bottom: 1.5rem; } }
.selfhost-card.plain .title { margin-bottom: 0; }
.selfhost-card .rid-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    background-color: var(--color-black-30);
    padding: 0.75rem;
    border-radius: var(--radius-2xl);
    word-break: break-all;
    line-height: 1.625;
    margin-top: 0.25rem;
}
.selfhost-card ol { font-size: 0.75rem; color: var(--color-zinc-300); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .selfhost-card ol { font-size: 0.875rem; gap: 1rem; } }
.selfhost-card ol li { display: flex; gap: 0.75rem; }
.selfhost-card ol li .step-num { font-family: ui-monospace, monospace; color: var(--color-green-400); flex-shrink: 0; }
.selfhost-card code.inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background-color: var(--color-black-30);
    padding: 1px 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
}
@media (min-width: 640px) { .selfhost-card code.inline { font-size: 0.75rem; } }
.selfhost-card code.block {
    display: block;
    margin-top: 0.5rem;
    background-color: var(--color-black-50);
    padding: 0.5rem;
    border-radius: var(--radius-xl);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-green-300);
    word-break: break-all;
    font-size: 0.6875rem;
}
.selfhost-card .meta { font-size: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .selfhost-card .meta { margin-top: 1.5rem; } }
.selfhost-card .note { font-size: 0.75rem; color: var(--color-zinc-400); }
.selfhost-card .browse-link {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-green-400);
}
@media (min-width: 640px) { .selfhost-card .browse-link { margin-top: 2rem; } }
.selfhost-card .browse-link:hover { text-decoration: underline; }

.copy-cid {
    margin-top: 1.5rem;
    width: 100%;
    background-color: var(--color-white-10);
    padding: 0.875rem;
    border-radius: var(--radius-2xl);
    font-size: 0.75rem;
    font-weight: 500;
    border: 0;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
    cursor: pointer;
}
@media (min-width: 640px) { .copy-cid { margin-top: 2rem; padding: 1rem; font-size: 0.875rem; } }
.copy-cid:hover  { background-color: rgba(74, 222, 128, 0.10); }
.copy-cid:active { background-color: rgba(74, 222, 128, 0.15); }

.access-ipfs-link {
    margin-top: 0.75rem;
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-zinc-400);
    transition: color 0.2s ease;
}
.access-ipfs-link:hover { color: var(--color-green-400); }

/* 16.12 Always-Current fallback section */
.always-current {
    margin-top: 2rem;
    background-color: var(--color-zinc-900);
    border: 1px solid rgba(74, 222, 128, 0.20);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
}
@media (min-width: 640px) { .always-current { margin-top: 3rem; padding: 1.75rem; border-radius: var(--radius-3xl); } }
.always-current .head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.always-current .head .title  { color: var(--color-green-400); font-weight: 600; font-size: 1rem; }
@media (min-width: 640px) { .always-current .head .title { font-size: 1.125rem; } }
.always-current .head .badge  {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    color: var(--color-green-400);
    background-color: rgba(74, 222, 128, 0.10);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-3xl);
}
@media (min-width: 640px) { .always-current .head .badge { font-size: 0.75rem; } }
.always-current p {
    color: var(--color-zinc-400);
    font-size: 0.75rem;
    margin: 0 0 1rem;
    line-height: 1.625;
}
@media (min-width: 640px) { .always-current p { font-size: 0.875rem; } }
.always-current code { color: var(--color-green-400); }
.always-current .links {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
}
@media (min-width: 640px) {
    .always-current .links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; font-size: 0.75rem; }
}
.always-current .links a {
    background-color: var(--color-black-30);
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-2xl);
    word-break: break-all;
    color: var(--color-green-300);
    line-height: 1.375;
    transition: background-color 0.2s ease;
}
@media (min-width: 640px) { .always-current .links a { padding: 0.625rem 0.75rem; } }
.always-current .links a:hover  { background-color: rgba(74, 222, 128, 0.10); }
.always-current .links a:active { background-color: rgba(74, 222, 128, 0.15); }

.always-current details { margin-top: 1rem; }
@media (min-width: 640px) { .always-current details { margin-top: 1.25rem; } }
.always-current details summary {
    font-size: 0.75rem;
    color: var(--color-zinc-400);
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}
@media (min-width: 640px) { .always-current details summary { font-size: 0.875rem; } }
.always-current details summary:hover { color: var(--color-green-400); }
.always-current details pre {
    margin-top: 0.75rem;
    background-color: var(--color-black-40);
    border-radius: var(--radius-2xl);
    padding: 0.75rem;
    color: var(--color-green-300);
    overflow-x: auto;
    line-height: 1.625;
    font-size: 0.625rem;
}
@media (min-width: 640px) {
    .always-current details pre { padding: 1rem; font-size: 0.75rem; }
}

/* 16.13 Node card URL pill */
.node-card .url-pill {
    margin-top: 1rem;
    font-size: 0.625rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-green-300);
    background-color: var(--color-black-30);
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-2xl);
    word-break: break-all;
    line-height: 1.25;
    transition: background-color 0.2s ease;
}
@media (min-width: 640px) { .node-card .url-pill { padding: 0.5rem 0.75rem; margin-top: 1.5rem; } }
.node-card:hover .url-pill { background-color: rgba(74, 222, 128, 0.10); }

.node-card .node-name { font-weight: 500; color: var(--color-green-400); font-size: 0.875rem; }
@media (min-width: 640px) { .node-card .node-name { font-size: 1rem; } }
.node-card .node-desc { font-size: 0.6875rem; color: var(--color-zinc-400); margin-top: 0.25rem; line-height: 1.375; }
@media (min-width: 640px) { .node-card .node-desc { font-size: 0.75rem; } }

/* 16.14 Header nav links */
.nav-link { font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; white-space: nowrap; }
.nav-link:hover { color: var(--color-green-400); }
.nav-link.live-badge { display: inline-flex; align-items: center; gap: 0.375rem; }
.live-badge .pill {
    font-size: 0.625rem;
    background-color: rgba(74, 222, 128, 0.10);
    color: var(--color-green-400);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    font-family: ui-monospace, monospace;
    line-height: 1;
}
.live-badge .pill.ml { margin-left: 0.375rem; }

/* 16.15 Generic helpers used in markup */
.text-xxs { font-size: 0.625rem; }

/* 16.16 Vertical spacing for sections */
.section { margin-top: 3.5rem; }
@media (min-width: 640px) { .section { margin-top: 5rem; } }
.section.lg  { margin-top: 3rem;  }
@media (min-width: 640px) { .section.lg { margin-top: 4rem; } }

.section-header h2 { margin: 0 0 0.5rem; }
.section-header p  { color: var(--color-zinc-400); margin: 0 0 1.5rem; font-size: 0.875rem; }
@media (min-width: 640px) { .section-header p { font-size: 1rem; margin-bottom: 2rem; } }

/* Sub-section heading inside Live Versions */
.subheading {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    row-gap: 0.5rem;
}
@media (min-width: 640px) { .subheading { font-size: 1.25rem; margin-bottom: 1rem; } }

/* Footer spacer */
.footer-spacer { border-top: 1px solid var(--color-white-10); padding-top: 2.5rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .footer-spacer { padding-top: 3rem; margin-top: 5rem; } }

/* Centred-with-padding helper */
.centered { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .centered { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Three-column grid used by the selfhost row */
.grid-3 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* 4/2/1 responsive grid for the Radicle nodes */
.grid-nodes { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px)  { .grid-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .grid-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* per-node commit display */
.node-card .commit-line {
    margin-top: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    color: var(--color-zinc-500);
    word-break: break-all;
    line-height: 1.25;
    min-height: 1rem;
}
.node-card .commit-line code { color: var(--color-green-300); }
.node-card .commit-line.probing { color: var(--color-zinc-400); font-style: italic; }

/* badge row inside a node card */
.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    align-items: center;
}
.badge-row .pad {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.5625rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.badge-row .pad.latest       { background-color: rgba(74, 222, 128, 0.20);  color: var(--color-green-300); border: 1px solid rgba(74, 222, 128, 0.40); font-weight: 600; }
.badge-row .pad.reachable   { background-color: rgba(255, 255, 255, 0.06); color: var(--color-zinc-300); }
.badge-row .pad.unreachable { background-color: rgba(248, 113, 113, 0.15); color: var(--color-red-400); border: 1px solid rgba(248, 113, 113, 0.30); }
.badge-row .pad.lagging     { background-color: rgba(234, 179, 8, 0.15);  color: #facc15; border: 1px solid rgba(234, 179, 8, 0.30); }
.badge-row .pad.manual      { background-color: rgba(74, 222, 128, 0.10);  color: var(--color-green-400); border: 1px solid rgba(74, 222, 128, 0.20); }
.badge-row .pad.routed      { background-color: rgba(255, 255, 255, 0.04); color: var(--color-zinc-400); }
.badge-row .pad.bookmark    { background-color: rgba(255, 255, 255, 0.04); color: var(--color-zinc-500); }

/* dynamic visual state of node cards based on live-fetched HEAD */
.node-card.status-latest      { border-color: rgba(74, 222, 128, 0.55); box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.30); }
.node-card.status-lagging     { border-color: rgba(234, 179, 8, 0.30); }
.node-card.status-reachable   { border-color: var(--color-white-10); }
.node-card.status-unreachable { border-color: rgba(248, 113, 113, 0.25); opacity: 0.6; }
.node-card.status-unreachable .commit-line { color: var(--color-red-400); font-style: italic; }

/* discovery banner shown above the grid while probing */
.discovery-banner {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-zinc-900);
    border: 1px solid var(--color-white-10);
    border-radius: var(--radius-2xl);
    font-size: 0.75rem;
    color: var(--color-zinc-400);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 640px) { .discovery-banner { font-size: 0.875rem; padding: 0.875rem 1.25rem; margin-bottom: 1.25rem; } }
.discovery-banner .dot {
    width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full);
    background-color: var(--color-green-400);
    flex-shrink: 0;
    animation: pulse 1.4s ease-in-out infinite;
}
.discovery-banner.done .dot { animation: none; background-color: var(--color-green-400); opacity: 1; }
.discovery-banner code { color: var(--color-green-400); font-family: ui-monospace, monospace; }
.discovery-banner .live-count { color: var(--color-green-300); font-weight: 600; }
.discovery-banner .lag-count  { color: #facc15; font-weight: 600; }
.discovery-banner .err-count  { color: var(--color-red-400); font-weight: 600; }