/**
 * Custom CSS - All styles integrated (no Code Injection needed)
 */

/* ==========================================================================
   0a. IOSEVKA AILE — Self-hosted (subset Spanish/Rioplatense + tipografía editorial)
   ==========================================================================
   Self-hosted desde 2026-04-28. Reemplaza la carga vía cdnjs (Iosevka v6.0.0,
   27 archivos woff2, charset completo). Bundle actual: 5 archivos, ~51 KB
   total (vs ~20 MB del setup anterior). Reducción del ~99%.

   Pipeline para regenerar (si en algún momento querés actualizar a una
   versión más nueva de Iosevka):
     1. cd /tmp && npm pack @fontsource/iosevka-aile
     2. tar -xzf fontsource-iosevka-aile-*.tgz
     3. pyftsubset package/files/iosevka-aile-latin-{weight}-{style}.woff2
        --flavor=woff2 --output-file=... --unicodes="..." (ver rango abajo)
        --layout-features=kern,liga,clig --no-hinting --desubroutinize
     4. Copiar los 5 archivos a assets/vendors/iosevka/

   Unicode-range cubre:
     U+0020-007E    Basic Latin
     U+00A0-00FF    Latin-1 Supplement (ñ, á, é, í, ó, ú, ¿, ¡, ç, etc)
     U+0131         dotless i (ı)
     U+0152-0153    Œ œ
     U+02BB-02BC    modifier letters (ʻ ʼ)
     U+02C6,02DA,   circumflex, ring, tilde modifiers
     U+02DC
     U+2010-2015    dashes (hyphen, en-dash, em-dash, horizontal bar)
     U+2018-201F    smart quotes ('' "" ‚ „)
     U+2026         ellipsis (…)
     U+2032-2033    prime, double prime (′ ″)
     U+2039-203A    single angle quotes (‹ ›)
     U+2044         fraction slash (⁄)
     U+20AC         Euro (€)
     U+2122         Trademark (™)
     U+2191,2193    arrows up/down (↑ ↓)
     U+2212         minus (−)
     U+2215         division slash (∕)
     U+FEFF         zero-width no-break space (BOM)
     U+FFFD         replacement character (�)

   Si en algún momento metés contenido en otro idioma (cirílico, griego,
   chino, etc), hay que sumar más @font-face con esos rangos. Fontsource
   publica subsets adicionales (cyrillic, greek, vietnamese, latin-ext).

   font-display: swap → muestra fallback (system-ui) hasta que el woff2
   esté listo, evitando FOIT (texto invisible). La fuente swappa al cargar.

   Licencia: Iosevka es SIL Open Font License v1.1. Atribución sugerida en
   el footer del sitio o en /colofon.

   2026-06-14: REVERTIDO a la fuente ORIGINAL Iosevka Aile Web (el usuario pidió "cambiar
   fuente por Iosevka Aile Web"). Los @font-face apuntan a vendors/iosevka/
   iosevka-aile-latin-{400,500,600,700}-normal.woff2 + 400-italic.woff2 (peso real por
   archivo, sin mapear). Breijo Mono/Aile/Serif quedan en disco sin uso (vendors/breijo*). */
@font-face {
    font-family: 'Iosevka Aile Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendors/iosevka/iosevka-aile-latin-400-normal.woff2') format('woff2');   /* Iosevka Aile Web 400 normal */
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
                   U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2015,
                   U+2018-201F, U+2026, U+2032-2033, U+2039-203A, U+2044,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Iosevka Aile Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('vendors/iosevka/iosevka-aile-latin-400-italic.woff2') format('woff2');   /* Breijo Serif Oblique (itálica) */
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
                   U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2015,
                   U+2018-201F, U+2026, U+2032-2033, U+2039-203A, U+2044,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Iosevka Aile Web';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendors/iosevka/iosevka-aile-latin-500-normal.woff2') format('woff2');   /* Iosevka Aile Web 500 normal */
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
                   U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2015,
                   U+2018-201F, U+2026, U+2032-2033, U+2039-203A, U+2044,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Iosevka Aile Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendors/iosevka/iosevka-aile-latin-600-normal.woff2') format('woff2');   /* Iosevka Aile Web 600 normal */
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
                   U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2015,
                   U+2018-201F, U+2026, U+2032-2033, U+2039-203A, U+2044,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Iosevka Aile Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendors/iosevka/iosevka-aile-latin-700-normal.woff2') format('woff2');   /* Iosevka Aile Web 700 normal */
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
                   U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2015,
                   U+2018-201F, U+2026, U+2032-2033, U+2039-203A, U+2044,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

/* ==========================================================================
   0. GLOBAL FONT - Iosevka
   ========================================================================== */

:root {
    --font-family-headings: 'Iosevka Aile Web', sans-serif !important;
    --font-family-body: 'Iosevka Aile Web', sans-serif !important;
    --font-family-button: 'Iosevka Aile Web', sans-serif !important;
    --gh-font-heading: 'Iosevka Aile Web', sans-serif !important;
    --gh-font-body: 'Iosevka Aile Web', sans-serif !important;

    /* Wider content area for posts list (default 600px) */
    --container--width: 700px !important;

    /* Force text color */
    --color-foreground: #EEA020 !important;

    /* Force pure black backgrounds (Ghost dark mode defaults to grey #1d1e20/#242529) */
    --color-background: #000000 !important;
    --color-background-content: #000000 !important;
    --color-background-100: #0a0a0a !important;
    --color-background-200: #111111 !important;
    --color-background-300: #1a1a1a !important;
    --color-background-400: #222222 !important;
}

/* Force black on html */
html {
    background-color: #000000 !important;
}

/* Disable cross-document view transitions (white flash on dark theme) */
@view-transition {
    navigation: none;
}

/* ==========================================================================
   CUSTOM PILL SCROLLBAR
   ========================================================================== */

/* GLOBAL — TODAS las vistas/ventanas (2026-06-18). La barra de scroll DERECHA (la del viewport,
   en <html>) ya NO usa la scrollbar nativa en NINGUNA página: se OCULTA aquí y se reemplaza por
   una pill fina FLOTANTE (`.th-scrollpill`) que construye custom.js — aparece con fade al hacer
   scroll y se desvanece sola al frenar (es "overlay", no ocupa ancho). Funciona también en Firefox
   porque la pill es un <div> con JS, no depende de ::-webkit-scrollbar.

   Los scrollers INTERNOS (paneles, code blocks, embeds…) usan una pill nativa fina translúcida.
   EXCEPCIÓN intencional: el terminal-home conserva su scrollbar gruesa de 14px porque su regla
   `body.is-terminal-home ::-webkit-scrollbar` (más abajo) tiene MAYOR especificidad y gana. */

/* --- Scrollers INTERNOS (paneles): pill nativa fina. `body ::-webkit-scrollbar` (CON espacio)
       => solo descendientes de body; NUNCA toca la barra del viewport (esa es del <html>). --- */
body ::-webkit-scrollbar {
    width: 6px;
}

body ::-webkit-scrollbar-track {
    background: transparent;
}

body ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
}

body ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* --- Barra DERECHA (viewport): ocultar la nativa en TODO el sitio; la reemplaza la pill flotante --- */
/* Webkit (Chrome, Edge, Safari): sin espacio => el ::-webkit-scrollbar es el del <html> (viewport) */
html::-webkit-scrollbar {
    width: 0;
    height: 0;
}
/* Firefox: ocultar la barra del viewport (se refuerza en la regla `body` de más abajo) */
html {
    scrollbar-width: none;
}

/* --- Pill flotante (la "barra derecha" custom; alto y posición los setea custom.js) --- */
.th-scrollpill {
    position: fixed;
    top: 0;
    right: 4px;
    width: 6px;
    height: 40px;                 /* overwritten by JS */
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.30);
    opacity: 0;                   /* idle: invisible */
    pointer-events: none;         /* deja pasar clicks cuando está oculta */
    z-index: 60;                  /* sobre el contenido/navbar, bajo modales (9000+) y loading (999999) */
    transform: translateY(0);     /* posición la setea JS por frame (sin transición => sigue al scroll) */
    transition: opacity .28s ease, width .12s ease, background-color .12s ease;
    will-change: transform, opacity;
}

.th-scrollpill.is-visible {
    opacity: 1;
    pointer-events: auto;         /* arrastrable solo cuando es visible */
}

.th-scrollpill:hover,
.th-scrollpill.is-dragging {
    width: 10px;
    background-color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .th-scrollpill {
        transition: opacity .12s linear;
    }
}

/* Paneles que tienen pill flotante: ocultar su scrollbar NATIVA (la marca la pone custom.js).
   !important para ganarle a las reglas por-página (p.ej. body.is-terminal-home ::-webkit-scrollbar). */
.th-scrollpill-host {
    scrollbar-width: none !important;
}
.th-scrollpill-host::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

*, *::before, *::after {
    font-family: 'Iosevka Aile Web', sans-serif !important;
    letter-spacing: -0.011em;
}

body {
    line-height: 1.35;
    word-spacing: -0.02em;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

p, li, td, th, span, a, label, blockquote {
    line-height: 1.4;
}

/* Ghost card buttons and elements with high specificity */
.kg-btn, .kg-cta-button, .kg-header-card-button,
.kg-product-card-button, .kg-signup-card-button,
.button, button[type=submit],
.post-content .kg-cta-sponsor-label,
.popover-container > div,
code, kbd, pre, samp,
.form-subscribe-fields > input,
.form-subscribe-fields > button {
    font-family: 'Iosevka Aile Web', sans-serif !important;
}

/* ==========================================================================
   1. COLOR OVERRIDES
   ========================================================================== */

/* Body text amber — scoped to avoid breaking Ghost card internals */
body, p, li, td, th, span, blockquote, figcaption, dd, dt,
.post-content, .sidebar-content, .popup-container,
.section-cards, .section-hero, .section-comments,
.post-card-content, .post-navigation-content,
.form-alert, .form-subscribe, time, .post-time,
code, kbd, pre, samp {
    color: #EEA020 !important;
}

/* Ghost card text — preserve readability but keep amber theme */
.post-content .kg-bookmark-description,
.post-content .kg-file-card-caption,
.post-content .kg-file-card-metadata,
.post-content .kg-product-card-description p,
.post-content .kg-callout-card,
.post-content .kg-toggle-content {
    color: #EEA020 !important;
}

.post-content .kg-bookmark-title,
.post-content .kg-file-card-title,
.post-content .kg-audio-title,
.post-content .kg-toggle-heading-text,
.post-content .kg-product-card h4 {
    color: #e1e1e1 !important;
}

a {
    color: #7aadfa !important;
}

h1, h2 {
    color: #F1F08C !important;
}

h3, h4, h5, h6 {
    color: #F1F08C !important;
}

label, .label, .gh-label, .post-label, .tag-label, .gh-post-tag {
    color: #e1e1e1 !important;
}

.tooltip, .tooltip-mobile {
    color: #e1e1e1 !important;
}

.tooltip-target {
    background-color: #870E1E !important;
    color: #ffffff !important;
    border-radius: 2rem !important;
    padding: 0.125rem 0.625rem !important;
}

.tooltip-target * {
    color: #ffffff !important;
}

/* --- Featured status: dot-matrix diamond icon in #D5A45A --- */
.rt-status-featured {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rt-status-featured .rt-destacado-svg {
    width: 40px !important;
    height: 40px !important;
    color: #EEA020 !important;
    display: block !important;
}

.rt-status-featured .rt-destacado-svg circle {
    fill: #EEA020 !important;
    animation: lock-dot-pulse 2.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.rt-status-featured .rt-destacado-svg circle:nth-child(3n+1) {
    animation-delay: 0s;
}
.rt-status-featured .rt-destacado-svg circle:nth-child(3n+2) {
    animation-delay: 0.8s;
}
.rt-status-featured .rt-destacado-svg circle:nth-child(3n) {
    animation-delay: 1.6s;
}

/* --- Paid status: dot-matrix lock icon in #D5A45A --- */
.rt-status-paid {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rt-status-paid .rt-lock-svg {
    width: 40px !important;
    height: 40px !important;
    color: #EEA020 !important;
    display: block !important;
}

.rt-status-paid .rt-lock-svg rect,
.rt-status-paid .rt-lock-svg path {
    stroke: #EEA020 !important;
}

.rt-status-paid .rt-lock-svg circle {
    fill: #EEA020 !important;
}

/* Subtle keyhole glow pulse */
.rt-status-paid .rt-lock-svg circle {
    animation: lock-glow 2.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes lock-glow {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.tooltip, .tooltip-mobile {
    border-radius: 2rem !important;
}

.toc-button, .toc-title {
    color: #ffffff !important;
}

/* ── Desktop TOC: visual hierarchy H1 > H2 > H3 ────────────────────── */
/* PVS default has nearly identical padding for all levels (20px total).
   We override to create clear parent-child visual distinction. */

/* Desktop only (matches PVS container query breakpoint) */
@container container (width > 600px) {
    /* Top-level links (H1) — bold, full padding, accent left border */
    .toc > ul > li > a {
        font-weight: 700 !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        font-size: var(--font-medium) !important;
        color: var(--color-contrast) !important;
    }

    /* Nested container (H2 group) — clear indent from parent */
    .toc > ul > li > ul {
        padding-left: 0.75rem !important;
        margin-top: 0.125rem;
        margin-bottom: 0.25rem;
        border-left: 1px solid color-mix(in srgb, var(--color-contrast), transparent 85%);
        margin-left: 1.25rem;
    }

    /* Nested links (H2) — lighter weight, smaller, indented */
    .toc > ul > li > ul > li > a {
        font-weight: 400 !important;
        font-size: calc(var(--font-medium) - 1px) !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        opacity: 0.75;
        transition: opacity .15s ease, color .15s ease, background-color .15s ease !important;
    }

    .toc > ul > li > ul > li > a:hover,
    .toc > ul > li > ul > li > a.active {
        opacity: 1;
    }

    /* Deep nested (H3 under H2) — even more indented */
    .toc > ul > li > ul > li > ul {
        padding-left: 0.5rem !important;
        margin-left: 0.75rem;
        border-left: 1px solid color-mix(in srgb, var(--color-contrast), transparent 90%);
    }

    .toc > ul > li > ul > li > ul > li > a {
        font-weight: 400 !important;
        font-size: calc(var(--font-medium) - 2px) !important;
        padding-left: 0.5rem !important;
        opacity: 0.6;
    }

    .toc > ul > li > ul > li > ul > li > a:hover,
    .toc > ul > li > ul > li > ul > li > a.active {
        opacity: 1;
    }

    /* Sticks: differentiate H1 sticks (wider) from H2 sticks (thinner) */
    .toc-sticks > span {
        width: 12px;
    }
}

/* UI chrome SVGs only — exclude post content, Ghost cards, and form icons */
.navbar svg, .navbar svg path,
.sidebar svg:not(.form-subscribe-btn svg), .sidebar svg path:not(.form-subscribe-btn svg path),
.popup-container svg, .popup-container svg path,
.footer svg, .footer svg path,
.scroll-progress svg, .scroll-progress svg path,
.post-footer svg, .post-footer svg path,
.post-card-footer svg, .post-card-footer svg path {
    color: #141414 !important;
    fill: #141414 !important;
    stroke: #ffffff !important;
}

/* Reset for subscription page SVGs */
.rt-subscription svg,
.rt-subscription svg circle,
.rt-subscription svg path {
    fill: none !important;
    stroke: none !important;
    color: inherit !important;
}
.rt-subscription svg circle {
    fill: #EEA020 !important;
}

/* Ghost card SVGs — preserve their original colors in post content */
.post-content svg,
.post-content svg path {
    color: inherit !important;
    fill: currentColor !important;
    stroke: inherit !important;
}

/* Specific Ghost card icon resets for dark theme */
.post-content .kg-audio-play-icon svg,
.post-content .kg-audio-pause-icon svg,
.post-content .kg-audio-unmute-icon svg,
.post-content .kg-video-large-play-icon svg,
.post-content .kg-toggle-card-icon svg,
.post-content .kg-file-card-icon svg {
    color: #EEA020 !important;
    fill: none !important;
    stroke: #EEA020 !important;
}

.post-content .kg-toggle-card-icon svg path {
    stroke: #EEA020 !important;
}

.post-content .kg-file-card-icon {
    background-color: #EEA020 !important;
}

.post-content .kg-file-card-icon svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

/* Bookmark card favicon */
.post-content .kg-bookmark-icon {
    border-radius: 2px;
}

/* Audio player styling for dark theme */
.post-content .kg-audio-card {
    background-color: #141414 !important;
    border-color: rgba(213,164,90,0.15) !important;
}

.post-content .kg-audio-current-time,
.post-content .kg-audio-duration,
.post-content .kg-audio-playback-rate {
    color: #EEA020 !important;
}

/* Toggle card dark theme */
.post-content .kg-toggle-card {
    background-color: transparent !important;
    border-color: rgba(213,164,90,0.15) !important;
}

.post-content .kg-toggle-card-icon {
    background-color: rgba(213,164,90,0.12) !important;
}

/* Callout card dark theme */
.post-content .kg-callout-card {
    color: #EEA020 !important;
}

/* Bookmark card dark theme */
.post-content .kg-bookmark-card a.kg-bookmark-container {
    background-color: #141414 !important;
    border-color: rgba(213,164,90,0.15) !important;
}

.post-content .kg-bookmark-card a.kg-bookmark-container:before {
    border-color: rgba(213,164,90,0.15) !important;
}

.post-content .kg-bookmark-metadata {
    color: #EEA020 !important;
}

/* Product card dark theme */
.post-content .kg-product-card-container {
    background-color: #141414 !important;
    border-color: rgba(213,164,90,0.15) !important;
}

.icon {
    color: #ffffff !important;
}

.post-time, .gh-post-time, time {
    color: #e1e1e1 !important;
}

.social-link, .social-link *, .social-link svg, .social-link svg path {
    color: #7aadfa !important;
    fill: #ffffff !important;
}

/* v71: Disable vendor's .post-content-teaser::before overlay — it adds a
   150px black gradient at the BOTTOM of the preview that obscures the
   last paragraphs. We have our own XP paywall fade above the paywall
   card (.th-paywall-inline-fade) which handles the visual transition.
   Stacking both creates an aggressive double-fade that hides preview text.
   v107.18 Bug #52: expanded scope to include body.page-terminal. Without
   this, /terminal/ rendered the vendor 150px black gradient PLUS our
   th-paywall-inline-fade — a visible double-fade above the paywall card
   when the worker denied access to a logged-out or free-tier visitor. */
body:is(.is-terminal-home, .page-terminal) .post-content::before,
body:is(.is-terminal-home, .page-terminal) .post-content-teaser::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Post button - black text on #D5A45A */
.post-button .button,
.post-button > .button,
.post-card-content > .post-button > .button {
    --button--color: #000000 !important;
    --button--background-color: #EEA020 !important;
    --button-hover--color: #000000 !important;
    --button-hover--background-color: #d98e1f !important;
    color: #000000 !important;
    background-color: #EEA020 !important;
}

.post-button .button:hover,
.post-button > .button:hover,
.post-card-content > .post-button > .button:hover {
    color: #000000 !important;
    background-color: #d98e1f !important;
}

.post-button .button span,
.post-button .button svg {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

.post-button .button > svg,
.post-button > .button > svg {
    display: none !important;
}

/* ==========================================================================
   2. BACKGROUNDS
   ========================================================================== */

.gh-content, .post-content, .post,
.post-full-content, .article-content, body, .gh-main,
.content-wrapper {
    background-color: #000000 !important;
}

.post-upgrade-cta {
    background-color: #141414 !important;
    border-color: rgba(213,164,90,0.10) !important;
}

.post-upgrade-cta > h2,
.content-wrapper .post-upgrade-cta > h2 {
    color: #FBEC90 !important;
    font-weight: 700 !important;
}

.post-upgrade-cta > p {
    color: #EEA020 !important;
}

.post-upgrade-cta > p a {
    color: #EEA020 !important;
}

aside.post-upgrade-cta > .rt-cta-btn ~ p,
.post-upgrade-cta > div.rt-cta-btn ~ p,
.post-upgrade-cta > .rt-cta-btn ~ p {
    color: #FBEC90 !important;
    font-weight: 700 !important;
}

aside.post-upgrade-cta > .rt-cta-btn ~ p a,
.post-upgrade-cta > div.rt-cta-btn ~ p a,
.post-upgrade-cta > .rt-cta-btn ~ p a {
    color: #FBEC90 !important;
    font-weight: 700 !important;
}

.post-upgrade-cta > p + p {
    margin-top: calc(var(--spacing-6) * -1 + 4px) !important;
}

.kg-bookmark-container {
    background-color: #141414 !important;
}

/* ==========================================================================
   3. NAVBAR - MENU LEFT, LOGO CENTER, SEARCH RIGHT
   ========================================================================== */

.navbar {
    background-color: transparent !important;
}

.gh-head, .gh-head-inner, .site-header, header {
    background-color: transparent !important;
}

.navbar-container {
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: none !important;
    background-clip: border-box !important;
    /* Push the Menu and Buscar buttons to the actual edges of the
       container (rather than whatever default gutter the theme set).
       The container itself is already bounded to --container--width,
       so "extremes of the page" = extremes of this container. */
    padding-left: var(--spacing-4) !important;
    padding-right: var(--spacing-4) !important;
}

/* ── Labeled navbar actions (Menu / Buscar) ──
   Post-rework (2026-04): icons eliminados, el texto carga todo el peso
   visual. Iosevka Aile Web explícita (nombre del @font-face cargado vía
   CDN en default.hbs) para garantizar que la web font realmente aplica
   y no cae en un monoespaciado genérico del sistema.

   Hover = subrayado animado estilo .m-signin (scaleX desde la izquierda,
   0.4s cubic-bezier) — coherente con el link "Iniciar sesión" del m-gate. */
.navbar-action.navbar-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
}

.navbar-action__label {
    font-family: 'Iosevka Aile Web', 'SF Mono', Menlo, monospace !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--color-contrast) !important;
    line-height: 1 !important;
    opacity: 1;
    white-space: nowrap;
    user-select: none;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

/* Subrayado animado — mismo patrón que .m-gate .m-signin::after.
   1px, transform-origin left, scaleX(0) → scaleX(1), cubic-bezier. */
.navbar-action__label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-action:hover .navbar-action__label::after,
.navbar-action:focus-visible .navbar-action__label::after {
    transform: scaleX(1);
}

/* Hide labels on very narrow screens — sin íconos ya no hay fallback
   visual, así que en <=340px bajamos el tamaño en lugar de ocultar
   para no dejar botones vacíos. */
@media (max-width: 480px) {
    .navbar-action__label {
        font-size: 12px !important;
        letter-spacing: 1.6px !important;
    }
}

/* Menu toggle — post-rework 2026-04 es text-only.
   Se eliminaron las reglas del .icon span (hamburguesa con pseudos
   ::before/::after que hacían la animación hamburger→X) porque el
   span ya no existe en navbar.hbs. El popup tiene su propio botón
   de cerrar (.popup-close) con su X, intacto más abajo. */
.navigation-toggle {
    order: 0;
    flex: 0 0 auto;
    margin-left: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
}

.navigation-toggle > .label {
    display: none !important;
}

.navigation-toggle::before {
    display: none !important;
}

/* Close button in popup — same style */
.popup-container > .popup-close.button {
    --button--padding-v: 0 !important;
    --button--padding-h: 0 !important;
    --button--min-height: auto !important;
    --button--background-color: transparent !important;
    --button-hover--background-color: transparent !important;
    position: sticky !important;
    top: var(--spacing-6) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: var(--spacing-8) !important;
    margin-bottom: 0 !important;
    z-index: 2;
    gap: 0 !important;
}

.popup-container > .popup-close.button > .label {
    display: none !important;
}

.popup-container > .popup-close.button::before {
    display: none !important;
}

.popup-container > .popup-close.button > .icon {
    color: var(--color-contrast) !important;
    width: 26px !important;
    height: 26px !important;
    gap: 7px !important;
}

.popup-container > .popup-close.button > .icon::before,
.popup-container > .popup-close.button > .icon::after {
    width: 18px !important;
    height: 2px !important;
    background-color: var(--color-contrast) !important;
}

/* Navbar z-index */
.navbar {
    z-index: 13 !important;
}

/* Hide empty popup head */
.popup-head {
    display: none !important;
}

/* Space between close button and navigation links */
.popup-container .navigation-popup:first-of-type {
    margin-top: var(--spacing-10) !important;
}

/* Tighter popup footer */
.popup-footer {
    padding-top: var(--spacing-4) !important;
    padding-bottom: var(--spacing-4) !important;
}

/* Tighter recommendations heading */
.popup-recommendations > span {
    margin-bottom: var(--spacing-3) !important;
}

/* Logo centered */
.navbar-logo-center {
    order: 1;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-logo-center .logo {
    margin: 0;
}

.navbar-logo-center .logo::before {
    display: none;
}

/* Search button on the right — text-only después del rework 2026-04.
   Se eliminaron: SVG de lupa, pill shape, fondo translúcido en hover,
   y la versión circular <=480px. El hover ahora es el subrayado
   animado del .navbar-action__label (definido arriba). */
.navbar-search-button {
    order: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-contrast);
    text-decoration: none;
    position: relative;
}

.navbar-search-button.navbar-action {
    padding: 0 !important;
    height: auto;
    border-radius: 0;
    width: auto;
    background: transparent !important;
    background-color: transparent !important;
}

.navbar-search-button:hover,
.navbar-search-button:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color-contrast);
}

.nav-item, .gh-head-menu a, .nav-link {
    background-color: transparent !important;
}

.navigation-popup .nav-link:hover::before,
.navigation-popup .nav-link-current::before {
    background-color: rgba(255,255,255,0.05) !important;
}

.nav-separator, nav .nav-separator, header .nav-separator, .gh-head .nav-separator {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.1) !important;
}

@media screen and (max-width: 768px) {
    .navbar-container, .gh-head-menu, .gh-navigation, .gh-head-actions {
        background-color: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .gh-head, .gh-head-inner, header {
        background-color: transparent !important;
    }

    /* Override container-query pill style on mobile */
    .navbar-container {
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: var(--spacing-4) 0 !important;
    }
}

/* Override built-in .navigation-mobile backdrop-filter (same perf issue) */
.navigation-mobile {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.92) !important;
}

/* ==========================================================================
   4. POPUP - LEFT-TO-RIGHT CURTAIN + LARGER FONT
   ========================================================================== */

.popup-container {
    background-color: rgba(0,0,0,0.056) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* Override built-in clip-path for left-to-right curtain */
    clip-path: inset(0 100% 0 0 round var(--radius-3)) !important;
    transition: clip-path 0.85s cubic-bezier(0.32, 0.72, 0, 1),
                background-color 0.4s ease !important;
}

.popup-show .popup-container {
    background-color: rgba(0,0,0,0.07) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    clip-path: inset(0 0 0 0 round var(--radius-2)) !important;
    transition: clip-path 0.85s cubic-bezier(0.32, 0.72, 0, 1),
                background-color 0.6s ease !important;
}

/* Navigation links inside popup */
.navigation-popup .nav-link {
    font-size: 1.1rem !important;
    padding: var(--spacing-2) 0 !important;
}

.navigation-popup .nav-section-link {
    font-size: 0.95rem !important;
}

/* Tighter gap between nav sections */
.navigation-popup .nav-section:not(:first-child) {
    margin-top: var(--spacing-3) !important;
}

.navigation-popup .nav-separator {
    margin-top: var(--spacing-3) !important;
    margin-bottom: var(--spacing-3) !important;
}

/* Slower overlay fade */
.popup-overlay {
    transition: background-color 0.85s ease !important;
}

/* Slower content reveal inside popup */
.popup-show .popup-container :where(.navigation-popup, .popup-recommendations, .popup-footer, .popup-button-member) {
    transition: opacity 0.8s ease !important;
    transition-delay: 0.25s !important;
}

/* ==========================================================================
   5. SIDEBAR HERO CONTENT
   ========================================================================== */

/* Center sidebar-content horizontally within its container.
   Bug: base theme defines `max-width: var(--container-small--width)` (460px)
   on .sidebar-content but doesn't auto-margin it. Inside the parent flex
   column (.sidebar-container) with default align-items: stretch + a
   max-width child, the content ended up left-aligned with a gap to the
   right. Same issue applied to .sidebar-hero-content (the home-hero body).
   Adding margin-inline: auto on both fixes the centering. */
.sidebar-content,
.sidebar-hero-content {
    margin-left: auto !important;
    margin-right: auto !important;
}

.sidebar-content > h1 {
    margin-left: -0.04em;
    padding: 0;
}

/* Hide site title on homepage sidebar */
.home-template .sidebar-content > h1 {
    display: none !important;
}

.sidebar-hero-content {
    width: 100%;
    max-width: var(--container-small--width);
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sidebar-hero-content p {
    margin-top: var(--spacing-7);
    margin-bottom: 0;
    font-size: var(--font-medium);
    line-height: 1.6;
}

.sidebar-hero-content p:first-child {
    margin-top: var(--spacing-7);
}

.sidebar-hero-content h2,
.sidebar-hero-content h3,
.sidebar-hero-content h4,
.sidebar-hero-content h5,
.sidebar-hero-content h6 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
    line-height: 1.3;
}

.sidebar-hero-content h2 { font-size: var(--font-h4); }
.sidebar-hero-content h3 { font-size: var(--font-h5); }
.sidebar-hero-content h4 { font-size: var(--font-h6); }

.sidebar-hero-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sidebar-hero-content a:hover {
    opacity: 0.8;
}

.sidebar-hero-content ul,
.sidebar-hero-content ol {
    margin-top: var(--spacing-6);
    margin-bottom: 0;
    padding-left: 1.5em;
    font-size: var(--font-medium);
    line-height: 1.6;
}

.sidebar-hero-content li + li {
    margin-top: var(--spacing-4);
}

.sidebar-hero-content blockquote {
    margin-top: var(--spacing-7);
    margin-bottom: 0;
    padding-left: var(--spacing-7);
    border-left: 2px solid currentColor;
    font-style: italic;
    opacity: 0.8;
}

.sidebar-hero-content img,
.sidebar-hero-content video,
.sidebar-hero-content iframe,
.sidebar-hero-content figure {
    max-width: 100%;
    height: auto;
    margin-top: var(--spacing-7);
    margin-bottom: 0;
    border-radius: var(--radius-2);
}

.sidebar-hero-content figcaption {
    margin-top: var(--spacing-4);
    font-size: var(--font-x-small);
    text-align: center;
    opacity: 0.6;
}

.sidebar-hero-content .kg-card {
    max-width: 100%;
    margin-top: var(--spacing-7);
    margin-bottom: 0;
}

.sidebar-hero-content .kg-image-card img,
.sidebar-hero-content .kg-gallery-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.sidebar-hero-content .kg-bookmark-card,
.sidebar-hero-content .kg-embed-card {
    max-width: 100%;
    overflow: hidden;
}

.sidebar-hero-content hr {
    margin-top: var(--spacing-8);
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.2;
}

.sidebar-hero-content .kg-width-wide,
.sidebar-hero-content .kg-width-full {
    max-width: 100%;
    width: 100%;
}


/* ==========================================================================
   6. FORM SUBSCRIBE — TERMINAL STYLE
   ========================================================================== */

.form-subscribe {
    width: 100%;
    overflow: visible !important;
}

/* Container — brackets wrap input + button */
.form-subscribe-fields {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 20px 24px !important;
    background: rgba(213,164,90,0.06) !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Email input — override theme's padding-right:150px, border-radius:2rem, background */
.form-subscribe-fields > input[type="email"],
.form-subscribe-fields input[data-members-email] {
    width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 0 12px 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(213,164,90,0.15) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #EEA020 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Iosevka Aile Web', sans-serif !important;
    transition: border-color 0.35s ease !important;
}

.form-subscribe-fields input[type="email"]:focus {
    border-bottom-color: #EEA020 !important;
}

.form-subscribe-fields input[type="email"]::placeholder {
    color: rgba(213,164,90,0.6) !important;
    font-family: 'Iosevka Aile Web', sans-serif !important;
    letter-spacing: 0.02em !important;
}

.form-subscribe-fields input[type="email"]:focus::placeholder {
    color: rgba(213,164,90,0.12) !important;
}

/* v107.16 Bug #27 fix (rev2): prevent iOS Safari auto-zoom on focus.
   The base rule above sets font-size: 12px for visual density on desktop;
   on touch devices we bump to 16px since iOS will pinch-zoom any input
   with computed font-size <16px when tapped, which is jarring UX (page
   resizes, keyboard appears, user has to manually zoom back). Mirrors the
   same fix on .th-paywall-input (Bug #26) and .m-gate .m-cta-form input
   (already had it at L2616). Visually 16px in this context is fine — the
   form-subscribe-fields container is wide enough to absorb the larger text
   on mobile, and the underline-only style (border-bottom) means there's
   no compact box constraint that would visually break with bigger text.
   v107.17 rev2: switched media query from (max-width: 720px) to
   (hover: none) and (pointer: coarse). The width-based query missed iPhone
   landscape (>720px) where auto-zoom still triggered. The capability-based
   query catches all touch devices regardless of orientation/viewport. */
@media (hover: none) and (pointer: coarse) {
    .form-subscribe-fields > input[type="email"],
    .form-subscribe-fields input[data-members-email] {
        font-size: 16px !important;
    }
}

/* Submit button — premium gold CTA.
   Rediseñado 2026-04 para matchear el look del .m-gate .m-cta-btn
   (gradiente dorado + borde naranja + halo triple) en lugar del
   botón minimal de solo texto anterior. La consistencia visual
   entre el form del sidebar y el m-gate refuerza la marca.

   Specificity nota: el m-gate tiene sus propios overrides más
   específicos (`.m-gate .m-cta-form button.form-subscribe-btn`)
   con !important, así que estos no lo pisan. */
.form-subscribe-fields > button[type="submit"],
.form-subscribe-fields > .button,
.form-subscribe-btn {
    --button--background-color: transparent;
    --button--color: #FBEC90;
    --button--opacity: 1;
    --button--min-width: 0;
    --button--min-height: 0;
    --button--padding-v: 0;
    --button--padding-h: 0;
    --button--border-radius: 0;
    --button-hover--background-color: transparent;
    --button-hover--color: #FBEC90;
    --button-hover--opacity: 1;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    align-self: stretch !important;
    /* min-height fijo (en vez de auto) para que la altura del botón no
       cambie entre estados. Default state mide ~50px (padding 32 +
       label 18 con line-height 1.5); estado .loading/.success mide
       ~48px (padding 32 + icon 16). Sin esto, se ve un sutil salto
       vertical al hacer click. Bug detectado 2026-04-28. */
    min-height: 50px !important;
    min-width: auto !important;
    padding: 16px 22px !important;
    margin: 14px 0 0 0 !important;
    inset: unset !important;
    top: unset !important;
    right: unset !important;
    bottom: unset !important;
    left: unset !important;
    background: linear-gradient(135deg,
                rgba(213, 164, 90, 0.14) 0%,
                rgba(213, 164, 90, 0.28) 100%) !important;
    background-color: transparent !important;
    border: 1.5px solid #EEA020 !important;
    border-radius: 0 !important;
    color: #FBEC90 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    /* Halo triple: warmth interna + halo naranja cercano + aura lejana */
    box-shadow:
        inset 0 0 12px rgba(241, 240, 140, 0.08),
        0 0 16px rgba(213, 164, 90, 0.2),
        0 0 36px rgba(213, 164, 90, 0.12) !important;
    font-family: 'Iosevka Aile Web', 'SF Mono', Menlo, monospace !important;
    gap: 8px !important;
    transition: background 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease,
                letter-spacing 0.35s ease,
                box-shadow 0.35s ease !important;
}

/* Hover — gradiente más denso, borde amarillo, halo intensificado.
   :hover y :focus-visible separados: el :hover queda detrás de un feature
   query (hover: hover) and (pointer: fine) para que no se "pegue" en
   iOS/Android tras el tap (en touch devices el :hover persiste hasta que
   se toca otro elemento, dejando el botón con halo expandido y bordes
   amarillos por varios segundos). El :focus-visible afuera del gate para
   no romper navegación por teclado en desktops con touchscreen. */
@media (hover: hover) and (pointer: fine) {
    .form-subscribe-fields > button[type="submit"]:hover,
    .form-subscribe-fields > .button:hover,
    .form-subscribe-btn:hover {
        background: linear-gradient(135deg,
                    rgba(213, 164, 90, 0.24) 0%,
                    rgba(213, 164, 90, 0.42) 100%) !important;
        background-color: transparent !important;
        border-color: #F1F08C !important;
        color: #FBEC90 !important;
        opacity: 1 !important;
        box-shadow:
            inset 0 0 18px rgba(241, 240, 140, 0.18),
            0 0 24px rgba(213, 164, 90, 0.4),
            0 0 60px rgba(213, 164, 90, 0.25) !important;
    }
}

.form-subscribe-fields > button[type="submit"]:focus-visible,
.form-subscribe-fields > .button:focus-visible,
.form-subscribe-btn:focus-visible {
    background: linear-gradient(135deg,
                rgba(213, 164, 90, 0.24) 0%,
                rgba(213, 164, 90, 0.42) 100%) !important;
    background-color: transparent !important;
    border-color: #F1F08C !important;
    color: #FBEC90 !important;
    opacity: 1 !important;
    box-shadow:
        inset 0 0 18px rgba(241, 240, 140, 0.18),
        0 0 24px rgba(213, 164, 90, 0.4),
        0 0 60px rgba(213, 164, 90, 0.25) !important;
}

/* Label — uppercase, tracking amplio, se expande levemente en hover */
.form-subscribe-fields > button .label,
.form-subscribe-btn .label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
    color: #FBEC90 !important;
    position: relative !important;
    z-index: 2 !important;
    font-family: 'Iosevka Aile Web', 'SF Mono', Menlo, monospace !important;
    display: inline !important;
    visibility: visible !important;
    transition: letter-spacing 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .form-subscribe-fields > button:hover .label,
    .form-subscribe-btn:hover .label {
        letter-spacing: 2.6px !important;
    }
}

.form-subscribe-fields > button:focus-visible .label,
.form-subscribe-btn:focus-visible .label {
    letter-spacing: 2.6px !important;
}

/* En .loading y .success Ghost muestra el spinner/check pero NO oculta
   el .label. La interpretación previa (ocultar el label) era equivocada —
   el usuario quiere que el texto se mantenga y solo aparezca el icono al
   lado sin desplazarlo. Solución: el spinner y el check se posicionan
   absolutamente sobre el lado derecho del botón. Como el botón ya tiene
   position:relative, los iconos quedan anclados sin entrar al flex,
   y el label sigue centrado en su posición original.
   El botón mantiene min-height: 50px (definido más arriba) para que la
   altura tampoco varíe entre estados. Re-fix 2026-04-28. */
.form-subscribe-btn .icon-loader,
.form-subscribe-btn .icon-check,
.form-subscribe-fields > button .icon-loader,
.form-subscribe-fields > button .icon-check {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
}

/* Corner brackets — on the container */
.rt-fc {
    position: absolute !important;
    width: 14px;
    height: 14px;
    z-index: 1;
    pointer-events: none;
    display: block !important;
    background: none !important;
    background-color: transparent !important;
    border-style: solid !important;
    border-color: #EEA020;
    border-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.rt-fc--tl { top: 0; left: 0; border-top-width: 2px !important; border-left-width: 2px !important; }
.rt-fc--tr { top: 0; right: 0; border-top-width: 2px !important; border-right-width: 2px !important; }
.rt-fc--bl { bottom: 0; left: 0; border-bottom-width: 2px !important; border-left-width: 2px !important; }
.rt-fc--br { bottom: 0; right: 0; border-bottom-width: 2px !important; border-right-width: 2px !important; }

/* Loader + check icon */
.form-subscribe-btn svg,
.form-subscribe-fields > button svg {
    color: #EEA020 !important;
    fill: none !important;
    stroke: #EEA020 !important;
}

/* Hide member avatars */
.form-subscribe-members {
    display: none !important;
}

/* Alert messages */
.form-alert {
    margin-top: 12px !important;
}
.form-alert .success {
    color: #A7E488 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}
.form-alert .error {
    color: #870E1E !important;
    font-size: 11px !important;
}

/* ==========================================================================
   7. POST TAG — BRACKET BUTTON (matches rt-cta-btn exactly)
   ========================================================================== */

.rt-tag-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 10px 20px !important;
    background: rgba(213,164,90,0.05) !important;
    background-color: rgba(213,164,90,0.05) !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    line-height: normal !important;
    margin: 4px 0 !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.rt-tag-btn__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #F1F08C !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 2 !important;
    white-space: nowrap !important;
    display: block !important;
    line-height: 1 !important;
    font-family: 'Iosevka Aile Web', 'Iosevka Aile', 'DM Mono', monospace !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   8. PREMIUM CONTENT GATING — Loading state
   ========================================================================== */

/* Loading state while checking member labels.
   "Verificando" animated AI-loader: a rotating gradient ring with the
   word spelled out in pulsing letters. Adapted from the 21st.dev
   "ai-loader" React component to plain CSS, with the word changed from
   "Generating" to "Verificando".

   SCOPED under .rt-premium-loading on purpose — the generic class names
   (.loader / .loader-letter / .loader-wrapper) must NOT collide with the
   theme's existing button spinner (.pagination-button > .loader in
   button.css). The keyframe names are unique and unused elsewhere. */
.rt-premium-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 0;
    opacity: 1;
    /* Fade-out al aprobar acceso: custom.js (rama AUTHORIZED) setea
       opacity:0 antes del display:none. Los otros paths ocultan instantáneo. */
    transition: opacity 0.35s ease;
    /* Fallback styling for the plain-text error state: custom.js replaces
       this element's contents via textContent on a fetch failure
       ("Error al cargar el contenido..."), which wipes the loader markup. */
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
}

.rt-premium-loading .loader-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    border-radius: 50%;
    background-color: transparent;
    user-select: none;
    white-space: nowrap;
}

.rt-premium-loading .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    /* The base theme bundle (built/index.css) defines a GLOBAL
       .loader { display:none; transform:translate(-50%,-50%) } for its
       pagination spinner. Re-assert both here or our ring would be
       invisible (display:none leaks) and double-offset when animations
       are disabled (the stray translate leaks). */
    display: block;
    transform: none;
    width: 100px;
    height: 100px;
    /* Centre WITHOUT transform — the rotate animation owns `transform`. */
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    box-shadow:
        0 10px 20px 0 #fff inset,
        0 20px 30px 0 rgba(255, 255, 255, 0.6) inset,
        0 60px 60px 0 rgba(255, 255, 255, 0.28) inset;
    animation: loader-rotate 2s linear infinite;
    z-index: 0;
}

.rt-premium-loading .loader-letter {
    display: inline-block;
    opacity: 0.4;
    transform: translateY(0);
    animation: loader-letter-anim 2s infinite;
    z-index: 1;
}

.rt-premium-loading .loader-letter:nth-child(1)  { animation-delay: 0s;   }
.rt-premium-loading .loader-letter:nth-child(2)  { animation-delay: 0.1s; }
.rt-premium-loading .loader-letter:nth-child(3)  { animation-delay: 0.2s; }
.rt-premium-loading .loader-letter:nth-child(4)  { animation-delay: 0.3s; }
.rt-premium-loading .loader-letter:nth-child(5)  { animation-delay: 0.4s; }
.rt-premium-loading .loader-letter:nth-child(6)  { animation-delay: 0.5s; }
.rt-premium-loading .loader-letter:nth-child(7)  { animation-delay: 0.6s; }
.rt-premium-loading .loader-letter:nth-child(8)  { animation-delay: 0.7s; }
.rt-premium-loading .loader-letter:nth-child(9)  { animation-delay: 0.8s; }
.rt-premium-loading .loader-letter:nth-child(10) { animation-delay: 0.9s; }
.rt-premium-loading .loader-letter:nth-child(11) { animation-delay: 1s;   }

@keyframes loader-rotate {
    0% {
        transform: rotate(90deg);
        box-shadow:
            0 10px 20px 0 #fff inset,
            0 20px 30px 0 rgba(255, 255, 255, 0.6) inset,
            0 60px 60px 0 rgba(255, 255, 255, 0.28) inset;
    }
    50% {
        transform: rotate(270deg);
        box-shadow:
            0 10px 20px 0 #fff inset,
            0 20px 10px 0 rgba(255, 255, 255, 0.75) inset,
            0 40px 60px 0 rgba(255, 255, 255, 0.2) inset;
    }
    100% {
        transform: rotate(450deg);
        box-shadow:
            0 10px 20px 0 #fff inset,
            0 20px 30px 0 rgba(255, 255, 255, 0.6) inset,
            0 60px 60px 0 rgba(255, 255, 255, 0.28) inset;
    }
}

@keyframes loader-letter-anim {
    0%,
    100% {
        opacity: 0.4;
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: scale(1.15);
    }
    40% {
        opacity: 0.7;
        transform: translateY(0);
    }
}

/* Reveal transition (audit "fade-in" 2026-06-30).
   Antes el flujo AUTHORIZED hacía un swap INSTANTÁNEO (loader display:none +
   contenido de golpe). Ahora el loader hace fade-out (ver custom.js) y el
   contenido entra con fade-in.
   FAIL-SAFE: la animación NO usa fill-mode, así que la opacidad base del
   contenido es 1; si la animación no corriera, el contenido queda VISIBLE
   (nunca atascado en opacity:0). */
@keyframes rt-content-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rt-premium-content {
    animation: rt-content-in 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .rt-premium-loading { transition: none; }
    .rt-premium-content { animation: none; }
}

/* ==========================================================================
   9. TERMINAL PAGE — Sidebar Hero + Content Benefits
   page-terminal.hbs fetches internal post "#terminal-hero" into sidebar
   ========================================================================== */

/* --- 9a. Terminal Sidebar + Benefits Cards ------------------------------
   2026-05-12: estilos eliminados intencionalmente.

   Los posts/páginas que renderizan en /terminal/ (terminal-hero + página)
   traen su propio <style> inline COMPLETO. Las reglas que estaban acá
   (.th-title, .th-desc, .th-pay, .th-vl, .th-ppw, .tb-grid, .tb-card,
   .tb-card-title, .tb-card-desc, etc.) entraban en conflicto con esos
   estilos inline:

   - .th-title font-size, .th-desc max-width, .th-ppw height/max-width,
     .th-ppot color — ambos lados con !important → pelea impredecible.

   - .tb-card { opacity:0; filter:blur(8px) } esperaba la clase .tb-visible
     que se agrega vía un scroll observer del theme (en otra parte del JS)
     que no se gatilla cuando el contenido está dentro de .th-raw-content.
     Resultado: las cards quedaban invisibles + borrosas permanentemente.

   Solución: dejar que los posts/páginas controlen TODOS sus estilos
   visuales internamente. El theme solo provee el layout exterior
   (.th-page-col / .th-raw-content) y las clases de tipografía base.
   ------------------------------------------------------------------------ */


/* ==========================================================================
   POSTS LIST — Substack-style layout
   Title → excerpt → lock+date (left), thumbnail (right)
   ========================================================================== */

/* ─── Card layout ─── */
/* ─── Card: CSS Grid layout ─── */
.posts-list > .post-card {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start;
    padding: 24px 16px;
    border-bottom: none;
    margin-top: 0 !important;
    margin-left: -16px;
    margin-right: -16px;
    position: relative;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

/* Hover disabled — no visual change on card hover (per design request).
   Cursor remains default; the click handler still works. */
.posts-list > .post-card:hover {
    background-color: transparent !important;
}

/* Card click is handled by JavaScript for reliability */

/* Cards WITH image: 2-column grid.
   Rows are now `auto auto` (was `auto auto auto`) since the footer was
   removed — column 1 has only header + excerpt now. */
.posts-list > .post-card:has(.post-card-media > :first-child) {
    grid-template-columns: 1fr 180px !important;
    grid-template-rows: auto auto;
    column-gap: 20px;
}

.posts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.posts-list > .post-card:first-child {
    padding-top: 24px;
}

/* Separator line between posts (centered in the gap above) */
.posts-list > .post-card + .post-card::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 16px;
    right: 16px;
    height: 1px;
    background-color: var(--color-border);
}

/* Flatten post-card-content so its children become grid items */
.posts-list .post-card-content {
    display: contents !important;
}

/* All text elements → column 1 */
.posts-list .post-card-head,
.posts-list .post-card-content > p,
.posts-list .post-card-footer {
    grid-column: 1 !important;
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Image → column 2, span all rows. Stretches to match text height
   (with min/max guards) so cards size to text content, not to image.
   This removes the empty space below short excerpts that occurred when
   the image had a fixed height larger than the text. */
.posts-list .post-card-media {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 70px;
    max-height: 100px;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 6px;
    position: relative !important;
}

/* ─── Hide: authors, header status icons ─── */
.posts-list .post-authors {
    display: none;
}

.posts-list .rt-tag-btn {
    margin-bottom: var(--spacing-2);
}

.posts-list .post-card-head > .post-status-icons {
    display: none;
}

/* ─── Head: title ─── */
.posts-list .post-card-head {
    display: block;
    grid-column: 1;
    margin: 0 !important;
}

.posts-list .post-card-head::after {
    display: none;
}

.posts-list .post-card-head > h2 {
    margin-top: 0;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.posts-list .post-card-head > h2 > a {
    color: #F1F08C !important;
    background-image: none !important;
    text-decoration: none !important;
    transition: color 0.15s ease, opacity 0.15s ease;
}

/* Title hover disabled — color stays the same and full opacity (no fade).
   The transition declared above is harmless when both states match. */
.posts-list .post-card-head > h2 > a:hover,
.posts-list > .post-card:hover .post-card-head > h2 > a {
    color: #F1F08C !important;
    opacity: 1 !important;
}

/* ─── Excerpt ─── */
.posts-list .post-card-content > p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #EEA020 !important;
    font-weight: var(--font-weight-regular);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 10px 0 0 0 !important;
    padding: 0;
}

/* ─── Footer: lock icon + date ─── */
.posts-list .post-card-footer {
    position: static !important;
    height: auto !important;
    margin: 6px 0 0 0 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.posts-list .post-card-footer-icons {
    display: inline-flex !important;
    align-items: center;
}

.posts-list .post-card-footer-icons .post-status-icons {
    display: flex;
    gap: var(--spacing-2);
}

.posts-list .post-card-footer-icons .post-status-icons > span {
    padding: 0 !important;
    background-color: transparent !important;
    border-radius: 0;
    min-height: 0;
    min-width: 0;
}

.posts-list .post-card-footer-icons .post-status-icons > span .label {
    display: none;
}

.posts-list .post-card-footer-icons svg {
    width: 32px !important;
    height: 32px !important;
    color: #EEA020 !important;
}

/* Animate all dot-matrix icon circles in posts footer (lock + destacado) */
.posts-list .post-card-footer-icons svg circle {
    fill: #EEA020 !important;
    animation: lock-dot-pulse 2.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.posts-list .post-card-footer-icons svg circle:nth-child(3n+1) {
    animation-delay: 0s;
}
.posts-list .post-card-footer-icons svg circle:nth-child(3n+2) {
    animation-delay: 0.8s;
}
.posts-list .post-card-footer-icons svg circle:nth-child(3n) {
    animation-delay: 1.6s;
}

.posts-list .post-card-footer > time {
    position: static;
    transform: none;
    writing-mode: horizontal-tb;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none !important;
    background-color: transparent !important;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(213,164,90,0.40) !important;
    white-space: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Thumbnail image fill ─── */
.posts-list .post-card-media .post-featured-image {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.posts-list .post-card-media .post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 6px;
    background-color: var(--color-background-200);
}

.posts-list .post-card-media figure {
    margin: 0 !important;
    padding: 0 !important;
}

.posts-list .post-card-media figcaption {
    display: none;
}

.posts-list .post-card-media .post-featured-video-preview {
    display: none;
}

/* Strip post-media decorations in list */
.posts-list .post-media {
    padding: 0 !important;
    max-width: none !important;
    z-index: auto !important;
}

.posts-list .post-media::before,
.posts-list .post-media::after {
    display: none !important;
}

.posts-list .post-media > .post-featured-image {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Posts without images: full width text */
.posts-list > .post-card:not(:has(.post-card-media > :first-child)) {
    grid-template-columns: 1fr !important;
}

/* ─── Default: hide footer icons (header ones visible outside list) ─── */
.post-card-footer-icons {
    display: none;
}

/* ─── Pagination ─── */
.section-posts-pagination-next {
    margin-top: var(--spacing-8);
}

/* ─── Tablet ─── */
@container container (width <= 768px) {
    .posts-list {
        gap: 20px !important;
    }

    .posts-list > .post-card + .post-card::before {
        top: -10px;
    }

    .posts-list > .post-card:has(.post-card-media > :first-child) {
        grid-template-columns: 1fr 140px !important;
        column-gap: 16px;
    }

    .posts-list .post-card-media {
        height: 85px !important;
    }

    .posts-list .post-card-media .post-featured-image img {
        border-radius: 6px;
    }
}

/* ─── Mobile ─── */
@container container (width <= 500px) {
    .posts-list {
        gap: 16px !important;
    }

    .posts-list > .post-card + .post-card::before {
        top: -8px;
    }

    .posts-list > .post-card:has(.post-card-media > :first-child) {
        grid-template-columns: 1fr 120px !important;
        column-gap: 12px;
    }

    .posts-list > .post-card {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .posts-list .post-card-media {
        height: 80px !important;
    }

    .posts-list .post-card-head > h2 {
        font-size: 1.05rem;
    }

    .posts-list .post-card-content > p {
        font-size: 0.82rem;
        -webkit-line-clamp: 2;
    }

    .posts-list .post-card-footer > time {
        font-size: 0.68rem;
    }
}

/* ==========================================================================
   COLOR SCHEME TOGGLE — force hidden
   ========================================================================== */
.toggle-color-scheme-button {
    display: none !important;
}

/* ==========================================================================
   POST PAGE FIXES (content-wrapper + sidebar)
   ========================================================================== */

/* 1. Content-wrapper text: amber for all descendants */
.content-wrapper,
.content-wrapper p,
.content-wrapper li,
.content-wrapper td,
.content-wrapper th,
.content-wrapper span:not(.rt-fc),
.content-wrapper blockquote,
.content-wrapper figcaption,
.content-wrapper dd,
.content-wrapper dt,
.content-wrapper label,
.content-wrapper .post-content,
.content-wrapper code,
.content-wrapper pre {
    color: #EEA020 !important;
}

/* Headings inside content: match bold color for h1/h2 */
.content-wrapper h1,
.content-wrapper h2,
.content-wrapper .post-content h1,
.content-wrapper .post-content h2 {
    color: #F1F08C !important;
}

.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6,
.content-wrapper .post-content h3,
.content-wrapper .post-content h4,
.content-wrapper .post-content h5,
.content-wrapper .post-content h6 {
    color: #F1F08C !important;
}

.content-wrapper time,
.content-wrapper .post-time,
.content-wrapper .post-footer time {
    color: #EEA020 !important;
}

/* Sidebar excerpt */
.post-template .sidebar-content > p {
    color: #EEA020 !important;
    font-size: 1.05rem;
    line-height: 1.45;
    margin-top: var(--spacing-5) !important;
}

@media (max-width: 859px) {
    .post-template .sidebar-content > p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.95rem;
    }
}

/* 2. Smaller tag button in sidebar */
.post-template .sidebar-content .rt-tag-btn {
    padding: 2px 7px !important;
}

.post-template .sidebar-content .rt-tag-btn .rt-tag-btn__label {
    font-size: 7px !important;
    letter-spacing: 2.2px !important;
}

/* 3. Title in sidebar */
.post-template .sidebar-content > h1 {
    font-size: clamp(1.75rem, 1.5rem + 0.5vw, 2.15rem) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-top: var(--spacing-3) !important;
}

/* 4. Sidebar spacing tighter */
.post-template .sidebar-content > div {
    margin-top: 0;
    gap: var(--spacing-4) !important;
}

/* 5. Featured image: centered, constrained to 600px (post pages only) */
.content-wrapper .post-media:not(.post-card-media) {
    padding: 0 !important;
    max-width: 700px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.content-wrapper .post-media:not(.post-card-media)::before,
.content-wrapper .post-media:not(.post-card-media)::after {
    display: none !important;
}

.content-wrapper .post-media:not(.post-card-media) > .post-featured-image,
.content-wrapper .post-media:not(.post-card-media) > .post-featured-video {
    margin: 0 !important;
    width: 100% !important;
}

.content-wrapper .post-media:not(.post-card-media) > .post-featured-image img {
    border-radius: 6px !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover;
}

/* ==========================================================================
   SIDEBAR LOGO WATERMARK
   ========================================================================== */
.sidebar-logo-watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--layout--sidebar--width, 42%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.sidebar-logo-watermark img {
    width: 100%;
    max-width: none;
    height: auto;
    opacity: 0.10;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    padding: 1rem;
}

/* Ensure sidebar content sits above the watermark */
.sidebar > .sidebar-container,
.sidebar > .sidebar-footer {
    position: relative;
    z-index: 1;
}

/* Hide tag pill containers and breadcrumbs on post pages (all devices) */
.post-template .sidebar-content .rt-tag-btn,
.post-template .sidebar-content > div > .post-status-icons {
    display: none !important;
}

.post-breadcrumbs {
    display: none !important;
}

/* Hide watermark on mobile */
@media (max-width: 859px) {
    .sidebar-logo-watermark {
        display: none !important;
    }
}

/* ==========================================================================
   POST NAVIGATION — compact list
   ========================================================================== */

.section-post-navigation.section-recent-posts {
    display: block !important;
    margin-top: 96px !important;
}

.section-recent-posts > h2 {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: #EEA020 !important;
    margin-bottom: var(--spacing-5) !important;
    max-width: var(--container--width);
    margin-left: auto;
    margin-right: auto;
}

/* Compact list */
.compact-posts-list {
    display: flex;
    flex-direction: column;
    max-width: var(--container--width);
    margin: 0 auto;
}

.compact-post-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none !important;
    transition: opacity 0.15s ease;
}

.compact-post-row:first-child {
    border-top: 1px solid var(--color-border);
}

.compact-post-row:hover {
    opacity: 0.7;
}

.compact-post-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compact-post-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #F1F08C !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.compact-post-date {
    font-size: 0.7rem !important;
    color: #EEA020 !important;
    opacity: 0.45;
}

.compact-post-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 36px;
    border-radius: 3px;
    object-fit: cover;
}

/* "Ver todos" button */
.recent-posts-viewall {
    text-align: center;
    margin-top: var(--spacing-8);
    max-width: var(--container--width);
    margin-left: auto;
    margin-right: auto;
}

.recent-posts-viewall a {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #EEA020 !important;
    text-decoration: none !important;
    padding: 8px 20px;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-block;
}

.recent-posts-viewall a:hover {
    background-color: rgba(213, 164, 90, 0.08);
    color: #F1F08C !important;
}

@media (max-width: 859px) {
    .compact-post-thumb {
        width: 44px;
        height: 30px;
    }

    .compact-post-title {
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   READ NEXT — EDITORIAL LIST (.rn-*)
   Premium-styled "Continue reading" block at the end of posts.
   Shares visual language with .m-gate (corner brackets, Iosevka,
   eyebrow with side rules, underline sweep on links).
   Legacy .compact-post-* styles above are kept but unused by the new template.
   ========================================================================== */

.rn-outer {
    position: relative;
    background: #0a0a0a;
    border: 1px solid rgba(213, 164, 90, 0.15);
    padding: 44px 44px 0;
    max-width: 640px;
    margin: 0 auto;
    font-family: 'Iosevka Aile Web', 'SF Mono', Menlo, monospace;
    color: rgba(213, 164, 90, 0.72);
}

.rn-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.rn-corner.tl {
    top: -1px;
    left: -1px;
    border-top: 1.5px solid #EEA020;
    border-left: 1.5px solid #EEA020;
}

.rn-corner.tr {
    top: -1px;
    right: -1px;
    border-top: 1.5px solid #EEA020;
    border-right: 1.5px solid #EEA020;
}

.rn-corner.bl {
    bottom: -1px;
    left: -1px;
    border-bottom: 1.5px solid #EEA020;
    border-left: 1.5px solid #EEA020;
}

.rn-corner.br {
    bottom: -1px;
    right: -1px;
    border-bottom: 1.5px solid #EEA020;
    border-right: 1.5px solid #EEA020;
}

.rn-head {
    text-align: center;
    margin-bottom: 32px;
}

.rn-eyebrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 420px;
    margin: 0 auto;
}

.rn-eyebrow-line {
    flex: 1;
    height: 1px;
    background: rgba(213, 164, 90, 0.2);
}

.rn-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #EEA020 !important;
    flex: 0 0 auto;
    font-family: 'Iosevka Aile Web', 'SF Mono', Menlo, monospace;
}

.rn-list {
    border-top: 1px solid rgba(213, 164, 90, 0.1);
    margin-bottom: 32px;
}

.rn-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 14px 18px 18px;
    border-bottom: 1px solid rgba(213, 164, 90, 0.08);
    text-decoration: none !important;
    transition: background 0.3s ease, padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.rn-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 2px;
    background: #EEA020;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.rn-row:hover {
    background: rgba(213, 164, 90, 0.04);
    padding-left: 28px;
}

.rn-row:hover::before {
    transform: scaleY(1);
}

.rn-row:active {
    background: rgba(213, 164, 90, 0.08);
}

.rn-row-info {
    flex: 1;
    min-width: 0;
}

.rn-row-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #FBEC90 !important;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.rn-row:hover .rn-row-title {
    color: #fff8d4 !important;
}

.rn-row-date {
    flex: 0 0 auto;
    font-size: 11px;
    color: rgba(213, 164, 90, 0.55);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.rn-row:hover .rn-row-date {
    color: rgba(213, 164, 90, 0.85);
}

.rn-row-arrow {
    flex: 0 0 14px;
    font-size: 13px;
    color: rgba(213, 164, 90, 0);
    transition: color 0.3s ease, transform 0.3s ease;
}

.rn-row:hover .rn-row-arrow {
    color: #EEA020;
    transform: translateX(3px);
}

.rn-back {
    text-align: center;
    padding-bottom: 30px;
}

.rn-back-link {
    position: relative;
    display: inline-block;
    padding: 10px 28px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #EEA020 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.rn-back-link::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 6px;
    height: 1px;
    background: #EEA020;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rn-back-link:hover {
    color: #FBEC90 !important;
}

.rn-back-link:hover::after {
    transform: scaleX(1);
}

/* Touch devices: neutralize hover shift (feels janky on tap), show arrow
   as permanent affordance */
@media (hover: none), (pointer: coarse) {
    .rn-row:hover {
        padding-left: 18px;
        background: transparent;
    }
    .rn-row:hover::before {
        transform: scaleY(0);
    }
    .rn-row:hover .rn-row-title {
        color: #FBEC90 !important;
    }
    .rn-row:hover .rn-row-arrow {
        color: rgba(213, 164, 90, 0.35);
        transform: none;
    }
    .rn-row-arrow {
        color: rgba(213, 164, 90, 0.35);
    }
}

/* Mobile */
@media (max-width: 540px) {
    .section-post-navigation.section-recent-posts {
        margin-top: 72px !important;
    }
    .rn-outer {
        padding: 32px 20px 0;
    }
    .rn-eyebrow-wrap {
        gap: 12px;
        max-width: 100%;
    }
    .rn-eyebrow-line {
        flex: 0 0 14px;
    }
    .rn-eyebrow {
        font-size: 10px;
        letter-spacing: 2.5px;
    }
    .rn-list {
        margin-bottom: 24px;
    }
    .rn-row {
        gap: 12px;
        padding: 16px 4px 16px 10px;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .rn-row:hover {
        padding-left: 16px;
    }
    .rn-row-info {
        flex: 1 1 100%;
        order: 1;
    }
    .rn-row-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 2.8em;
    }
    .rn-row-date {
        order: 2;
        flex: 0 0 auto;
        font-size: 10px;
        margin-top: 4px;
    }
    .rn-row-arrow {
        order: 3;
        margin-left: auto;
        align-self: center;
        flex: 0 0 auto;
    }
    .rn-back {
        padding-bottom: 24px;
    }
}

@media (max-width: 380px) {
    .section-post-navigation.section-recent-posts {
        margin-top: 56px !important;
    }
    .rn-outer {
        padding: 28px 14px 0;
    }
    .rn-corner {
        width: 16px;
        height: 16px;
    }
    .rn-row-title {
        font-size: 12.5px;
    }
    .rn-back-link {
        padding: 10px 20px;
        font-size: 10px;
    }
}

/* ==========================================================================
   PAGE: /terminal/ — CENTERED LAYOUT
   Custom layout triggered by page-terminal.hbs via {{#contentFor "custom-layout"}}.

   What this does:
   - Overrides the default split-screen (sidebar 42% + content 58% grid)
   - Navbar runs horizontally across the top, centered
   - Article is centered with generous side gutters (espacio a los extremos)
   - Scoped to body.page-terminal so nothing leaks to other pages

   The .container wrapper still exists (default.hbs always renders it), but
   here we flatten it from grid → flex column and re-use the space.
   ========================================================================== */

body.page-terminal .container {
    /* Override the grid layout used on every other page */
    display: flex !important;
    flex-direction: column;
    max-width: none !important;   /* !important required — built/index.css has .container:not(...) { max-width: var(--container--width) } at specificity 0,3,0 which beats 0,2,1 otherwise */
    width: 100% !important;
    gap: 0;
    /* Keep container query support so mobile breakpoints in theme CSS still work */
    container: container/inline-size;
}

/* ═════════════════════════════════════════════════════════════════════════
   NUCLEAR width fix + theme-level vars para /terminal/.
   Antes esto estaba dividido en dos bloques separados (líneas 2927 y 3155
   del custom.css original) que sobreescribían las MISMAS vars. Consolidado.
   Cada single rule de built/index.css que cape al contenido usa
   var(--container--width); redefinirla a 100% solo en terminal expande
   .content, .post-content > *, .post-card-head, .post-breadcrumbs, etc.
   ═════════════════════════════════════════════════════════════════════════ */
body.page-terminal {
    background: var(--color-background) !important;
    background-image: none !important;
    /* No container width cap — la mesa de operaciones ocupa el viewport */
    --container--width: 100% !important;
    --container-small--width: 100% !important;
    --layout--content--padding-h: 1rem !important;
    --layout--content--padding-v: 1.5rem !important;
    --layout--offset: 0px !important;
    --layout--padding: 0px !important;
    --layout--gap: 0px !important;
}

/* Wrapper that centers everything inside the container */
.page-terminal-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* v107.16 Bug #23 fix: 100dvh fallback to 100vh for iOS Safari URL bar
       behavior. /terminal/ has its own background color but inherits the
       same iOS viewport quirk — without dvh, scrolling the trade feed
       caused a sliver of unstyled space at the bottom on iPhone. */
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-background);
}


/* ---- MAIN (article centered, wide column with side gutters) ---- */
.page-terminal-main {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    /* User request 2026-05-26: padding-top 16px → 0px, contenido pegado al edge.
       Sides padding (1rem) y bottom (80px) se mantienen. Iteración previa:
       48px → 16px → 0px. */
    padding: 0 1rem 80px !important;
}

.page-terminal-article {
    width: 100%;
    /* No max-width cap — user explicitly asked for content to cover the
       screen to improve legibility of the trading terminal. The article
       now expands to the full viewport width (minus main's padding).
       !important needed because the template also has the .content class,
       which is styled globally in assets/built/index.css with heavy
       `padding: calc(--layout--content--padding-v + --layout--offset)
                   calc(--layout--content--padding-h + --layout--offset)`
       — that's ~70px of horizontal padding on desktop that collapses
       the usable width of the terminal terminal. Overriding here. */
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    position: relative;

    /* CSS containment: el polling reescribe innerHTML del article
       cada vez que cambia el feed. Sin contención, el navegador
       recalcula layout/paint en TODA la página. Con `contain: content`
       limita el invalidation al subárbol del article. Mejora medible
       (1-3 ms en updates de la tabla en notebooks viejas, mucho más
       en móviles). `content` = layout + paint + style + size containment. */
    contain: content;
}

/* Override the embedded #tj { max-width: 1080px !important } that comes
   in the Python-generated HTML. Can't edit that inline rule from here
   without a script, but higher-specificity + !important wins the
   cascade. User wants the full viewport for the trading dashboard. */
body.page-terminal #tj {
    max-width: none !important;
    width: 100% !important;
}

/* Force Iosevka Aile Web across every element inside the terminal
   dashboard. The updated Python publisher already emits
   'Iosevka Aile Web' as the font-family, but this override catches any
   older publish still cached at Ghost/CDN that still has the
   'Segoe UI' fallback baked in. Until the publisher runs again, the
   theme wins the cascade and forces the correct font. */
body.page-terminal #tj,
body.page-terminal #tj * {
    font-family: 'Iosevka Aile Web', 'Iosevka Aile', system-ui, sans-serif !important;
}

/* NOTE: typography/padding of the terminal terminal is controlled from
   inside orderflow_publisher.py (search for #tj inside `css = """..."""`).
   Keeping theme overrides to the minimum needed (width + font-family) so
   the Python remains the single source of truth for look-and-feel. */

/* NOTE: header/title/excerpt/feature CSS deliberately removed 2026-04-20
   when we stopped rendering the "Orderflow Terminal" H1 in
   post-terminal.hbs. If a title block is ever re-added, restore
   .page-terminal-header, -title, -excerpt, -feature rules from git. */

/* ---- Premium content / paywall — the default post-upgrade-cta is already
         max-width: var(--container--width) and margin: auto, so it centers
         naturally inside .page-terminal-article. Nothing extra needed. ---- */

/* Hide split-screen decorations that don't apply in this layout.
   The .content-frame, .content-background, .content-overlay, .sidebar
   divs aren't rendered by page-terminal.hbs (custom-layout skips them),
   but the CSS might still create effects on the .container. Explicitly
   neutralize those just in case. */
body.page-terminal .content-frame,
body.page-terminal .content-background,
body.page-terminal .content-overlay,
body.page-terminal .sidebar,
body.page-terminal .sidebar-logo-watermark {
    display: none !important;
}

/* User 2026-05-03: el Ghost Portal trigger button SE MANTIENE VISIBLE en
   /terminal/ ahora que el navbar fue removido (sesión 19). Antes el
   navbar Menu ofrecía acceso al account, pero sin navbar el user no
   tenía cómo logout/manage account. El portal trigger es la única vía
   de account management desde esta página. Trade-off: visual noise mínimo
   (icono pequeño en corner) vs UX broken (user stuck sin logout).
   Si querés ocultar igualmente, descommentá el block de abajo. */
/*
body.page-terminal #ghost-portal-root,
body.page-terminal .gh-portal-triggerbutton-wrapper,
body.page-terminal div[class*="gh-portal-triggerbutton"] {
    display: none !important;
}
*/

/* CRITICAL: default.hbs renders {{> "layout/popup-navigation"}} globally,
   OUTSIDE the custom-layout block. In the default grid layout, the popup
   stays out of the way thanks to the grid flow + clip-path + opacity 0.
   In our flat flex column layout it would show up as a thin empty band
   between content and the bottom of the viewport because it has
   `display: flex` with no position/height constraints. Force it into
   fixed positioning so it's visually absent until .popup-show activates
   the hamburger menu, at which point the theme's existing CSS takes over. */
body.page-terminal .popup-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 14;
}

/* Las vars críticas y el fondo del body.page-terminal se definen ahora
   en un único bloque arriba (~línea 2920). Antes había dos definiciones
   separadas de body.page-terminal que sobreescribían las mismas vars. */

/* The compiled theme CSS (assets/built/index.css) has:
     .post-content > * { max-width: min(var(--container--width), 100%) }
   which caps every child of .post-content. With --container--width=100%
   this already resolves correctly, but we pin it explicitly here with
   higher specificity + !important in case browser cascading gets weird
   with CSS custom properties on the body.
   Also: content-visibility lazyfies offscreen rendering — la tabla del
   terminal puede ser muy larga, y sin esto el navegador hace paint
   completo cada vez que el polling cambia el HTML. */
body.page-terminal .post-content > * {
    max-width: 100% !important;
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* ---- RESPONSIVE ----
   The theme uses @container queries tied to .container, which we keep
   (see container: container/inline-size above). But we back that up with
   @media queries so the layout adapts even if the container type doesn't
   kick in on some mobile browsers. ---- */

/* Tablet / laptop small (~900px) */
@media (max-width: 900px) {
    body.page-terminal {
        --container--width: 100%;
        --container-small--width: 100%;
    }
    .page-terminal-main {
        /* Top padding reducido (28px → 12px) ahora que el navbar está
           oculto en todo este breakpoint. Antes los 28px daban aire
           entre el navbar y el artículo; sin navbar, ese espacio es
           solo margen superior — bastante con 12px en tablet. Phones
           lo bajan a 8px en el bloque de 540px.
           BUG FIX 2026-05-03: !important agregado para que la regla
           base (con !important) no sobreescriba este override mobile.
           Los media queries no aumentan specificity, así que sin
           !important la base ganaba siempre y mobile heredaba 48px
           (luego 16px). */
        padding: 12px 1rem 48px !important;
    }
    .page-terminal-article {
        /* BUG FIX 2026-05-03: !important agregado para que el lateral gutter
           (0.5rem) se aplique. La regla base tiene padding:0 !important, así
           que sin !important este override mobile NUNCA APLICABA — el article
           tocaba los edges del browser en mobile. Mismo problema que ya se
           había fixeado en .page-terminal-main. */
        padding: 0 0.5rem !important;
        max-width: 100% !important;
    }
}

/* Phone (~540px and below) */
@media (max-width: 540px) {
    .page-terminal-main {
        /* padding-top reducido de 18px a 8px porque el navbar oculto
           ya no consume espacio. Total ganado: ~58px (50px del navbar
           + 10px del padding-top reducido) que ahora son altura útil
           para la tabla de trades en mobile.
           BUG FIX 2026-05-03: !important — ver comentario del bloque
           ≤900px arriba. */
        padding: 8px 0.5rem 32px !important;
    }
    .page-terminal-article {
        /* BUG FIX 2026-05-03: !important — ver comentario del bloque ≤900px. */
        padding: 0 0.25rem !important;
    }
    /* Make sure post images/tables/embeds don't overflow horizontally */
    body.page-terminal .post-content img,
    body.page-terminal .post-content table,
    body.page-terminal .post-content iframe,
    body.page-terminal .post-content .kg-card {
        max-width: 100% !important;
        height: auto;
    }
    /* Wide tables get horizontal scroll rather than overflowing the viewport */
    body.page-terminal .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Very narrow phones (~380px) */
@media (max-width: 380px) {
    .page-terminal-main {
        /* BUG FIX 2026-05-03: !important — ver comentario del ≤900px. */
        padding: 14px 0.375rem 24px !important;
    }
    .page-terminal-article {
        padding: 0;
    }
    .page-terminal-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   LIBRO DE OPERACIONES — Reutiliza el mismo styling que /terminal/
   ==========================================================================
   La página /libro-de-operaciones/ usa la misma estructura visual que
   /terminal/ (focused trading page, sin navbar, viewport completo).
   Para evitar duplicar todo el CSS de arriba, las reglas siguientes
   AGREGAN los selectores .page-libro-de-operaciones-* a las reglas
   existentes de .page-terminal-* via composición. Ver page-libro-de-
   operaciones.hbs y post-libro-de-operaciones.hbs.
   ========================================================================== */

/* Body container override (mismo que page-terminal) */
body.page-libro-de-operaciones {
    --container--width: 100% !important;
    --container--max-width: 100% !important;
    --container-small--width: 100% !important;
    --container-small--max-width: 100% !important;
    --layout--margin: 0px !important;
    --layout--offset: 0px !important;
    --layout--padding: 0px !important;
    --layout--gap: 0px !important;
    background-color: var(--color-background) !important;
}

/* Wrapper / main / article — hereda de page-terminal */
.page-libro-de-operaciones-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-background);
}

.page-libro-de-operaciones-main {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px 1rem 80px !important;
}

.page-libro-de-operaciones-article {
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    position: relative;
    contain: layout style;
    contain-intrinsic-size: auto 600px;
}

/* Mobile responsive — mismo patrón que terminal */
@media (max-width: 900px) {
    body.page-libro-de-operaciones {
        --container--width: 100%;
        --container-small--width: 100%;
    }
    .page-libro-de-operaciones-main {
        padding: 12px 1rem 48px !important;
    }
    .page-libro-de-operaciones-article {
        padding: 0 0.5rem !important;
        max-width: 100% !important;
    }
}

@media (max-width: 540px) {
    .page-libro-de-operaciones-main {
        padding: 8px 0.5rem 32px !important;
    }
    .page-libro-de-operaciones-article {
        padding: 0 0.25rem !important;
    }
    body.page-libro-de-operaciones .post-content img,
    body.page-libro-de-operaciones .post-content table,
    body.page-libro-de-operaciones .post-content iframe,
    body.page-libro-de-operaciones .post-content .kg-card {
        max-width: 100% !important;
        height: auto;
    }
    body.page-libro-de-operaciones .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 380px) {
    .page-libro-de-operaciones-main {
        padding: 14px 0.375rem 24px !important;
    }
    .page-libro-de-operaciones-article {
        padding: 0;
    }
}

/* ==========================================================================
   LIBRO DE OPERACIONES — Neutralizar reglas Ghost que afectan al widget #tw
   ==========================================================================
   El bot tws.py publica un HTML con `<div id="tw">` que se inyecta dentro de
   `<div class="post-content rt-premium-content">` (ver partials/post/content.hbs).
   Eso hace que el widget herede reglas de Ghost (built/index.css) que rompen
   el layout esperado del bot:
     1. `table { border: 1px solid var(--color-border) }`
        → agrega un border gris alrededor de la tabla
     2. `table tr+tr { border-top: 1px solid var(--color-border) }`
        → agrega line entre filas (compite con border:1px solid #393939 de td)
     3. `table td, table th { padding: var(--spacing-5) var(--spacing-6) }`
        → padding ~10x12px (cuando el bot quiere 5x3 / 10x6)
     4. `.post-content > * { margin-top: var(--vertical-rhythm) }`
        → 1rem de margin-top antes del #tw, separa visualmente de #content
     5. `.post-content > * { max-width: min(var(--container--width), 100%) }`
        → puede limitar el ancho si --container--width está mal cascadeado
     6. `.post-content { container: content/inline-size }`
        → crea CQ container que afecta media queries internas (inofensivo)

   El CSS del bot YA tiene `!important` en sus reglas, pero faltaba override
   explícito de `border`, `margin` y `max-width`. Estos overrides en theme
   son defensivos: cuando el bot publica un HTML viejo (sin los fixes), el
   theme igualmente neutraliza las reglas Ghost.

   Specificity: `.rt-premium-content #tw` = (0,2,1) > `.post-content > *` = (0,1,1).
   Con `!important` el override es absoluto.
   ========================================================================== */
.rt-premium-content #tw,
.post-content.rt-premium-content > #tw {
    margin: 0 !important;
    max-width: none !important;
}
.rt-premium-content #tw .tw-table,
.post-content.rt-premium-content #tw .tw-table {
    border: 0 !important;
    border-spacing: 0 !important;
    max-width: none !important;
}
.rt-premium-content #tw .tw-table tr,
.post-content.rt-premium-content #tw .tw-table tr {
    border: 0 !important;
}
/* Pisar el padding Ghost en td/th — el bot ya tiene sus propios `!important`,
   pero por si una versión vieja del HTML publicado no los tiene: */
.rt-premium-content #tw .tw-table th,
.post-content.rt-premium-content #tw .tw-table th {
    padding: 10px 6px !important;
}
.rt-premium-content #tw .tw-table td,
.post-content.rt-premium-content #tw .tw-table td {
    padding: 5px 3px !important;
}

/* ==========================================================================
   NAVBAR — Auto-ocultar en móvil al hacer scroll hacia abajo
   La clase .navbar-hidden se agrega al <body> desde custom.js.
   En páginas normales: el sticky es .navbar (translateY ahí).
   v107.18 (Bug #50): /terminal/ ya no tiene navbar (removido 2026-05-03),
   así que las reglas combinadas con .page-terminal-navbar son dead code.
   Simplificado a sólo .navbar.
   ========================================================================== */
.navbar {
    transition: transform 0.3s ease;
}

@media (max-width: 600px) {
    /* Solo activamos will-change en móvil (donde el efecto realmente corre)
       y solo cuando el body marca el estado de scroll — evita una capa GPU
       permanente en desktop o cuando el navbar nunca se oculta. */
    body.navbar-hidden .navbar {
        will-change: transform;
    }

    body.navbar-hidden:not(.page-terminal) .navbar {
        transform: translateY(-110%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar {
        transition: none;
    }
}

/* ================================================================
   TERMINAL HOME — applies only to body.is-terminal-home (set by home.hbs)
   Mantiene el theme intacto fuera del home. Iosevka @font-face NO se
   redeclara — el theme ya la tiene en assets/vendors/iosevka/.
   ================================================================ */

body.is-terminal-home {
	/* Backgrounds — explicit hierarchy */
	--th-bg-base:      #000000;
	--th-bg-sidebar:   #1a1a1a;
	--th-bg-card:      #2a2a2a;
	--th-bg-card-hi:   #353535;
	--th-bg-tab:       #D0CDD0;
	--th-bg-tab-hi:    #d8d6d9;
	--th-bg-tab-active:#000000;
	--th-bg-status:    #000000;
	--th-bg-tabs-bar:  #D0CDD0;

	/* Foregrounds */
	--th-fg-amber:     #fca82e;
	--th-fg-amber-bri: #ffba50;
	--th-fg-white:     #ededed;
	--th-fg-text:      #b8b8b8;
	--th-fg-text-dim:  #888888;
	--th-fg-tab-label: #2a2a2a;
	--th-fg-green:     #47ec6c;

	--th-bg-selected:  #12406D;
	--th-fg-selected:  #ffffff;

	--th-border:       #2a2a2a;
	--th-border-hi:    #404040;
	--th-border-tab:   #b8b6b9;

	background: #000 !important;
	color: var(--th-fg-text) !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 13px;
	line-height: 1.45;
	font-feature-settings: "ss01", "zero", "tnum", "kern", "calt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* v107.16 Bug #23 fix: 100vh in iOS Safari is computed at page-load
	   time using the viewport WHEN the URL bar is visible. After scroll,
	   the URL bar collapses and the visual viewport grows, but `100vh`
	   stays frozen at the initial smaller value, leaving a sliver of
	   undefined-color space at the bottom of the page. 100dvh is the
	   "dynamic" viewport height that updates as chrome bars come/go.
	   Two-line declaration: the second overrides the first only on
	   browsers that understand dvh (Safari 15.4+, Chrome 108+, Firefox
	   101+). Older browsers ignore the unparseable second line and keep
	   the 100vh fallback. */
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 !important;
	padding: 0 !important;
	/* Firefox: ocultar la barra del viewport — la reemplaza la pill flotante .th-scrollpill
	   (ver bloque CUSTOM PILL SCROLLBAR arriba; webkit del viewport = html::-webkit-scrollbar{width:0}). */
	scrollbar-width: none;
}

html:has(body.is-terminal-home) { background: #000 !important; }

/* Page transitions removed — instant nav for the snappiest feel.
   View Transitions API still provides a smooth cross-fade in browsers
   that support it (Chrome/Edge), without the artificial delay. */

/* Override theme's main.container constraints — terminal home goes edge-to-edge */
body.is-terminal-home > main.container,
body.is-terminal-home main.container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	/* v107.16 Bug #23 fix: 100dvh fallback to 100vh — see body rule above. */
	min-height: 100vh !important;
	min-height: 100dvh !important;
	gap: 0 !important;
}

/* Hide the default theme's main wrapper / sidebar / scroll-progress for terminal home */
body.is-terminal-home .scroll-progress-wrapper,
body.is-terminal-home .post-breadcrumbs,
body.is-terminal-home main.container > aside.sidebar,
body.is-terminal-home main.container > .content-wrapper,
body.is-terminal-home .sidebar-logo-watermark,
body.is-terminal-home .sidebar-container,
body.is-terminal-home .sidebar-footer,
body.is-terminal-home .content-frame,
body.is-terminal-home .content-background,
body.is-terminal-home .content-overlay {
	display: none !important;
}

/* Hide loading-screen ONLY on /terminal/ and /libro-de-operaciones/.
   Estas páginas usan Worker auth flow ("Verificando acceso...") que
   ya muestra su propio loading. En el resto de las páginas (home,
   posts, tags, suscripción) el loading screen SÍ aparece normalmente.
   
   USER FIX 2026-05-20 v80: cambiado de `body.is-terminal-home` (que
   captura home + posts + tags + libro + suscripción) a las clases más
   específicas — antes el loading screen NUNCA aparecía en first-visit
   por culpa de esta regla being demasiado amplia. */
body.page-terminal #loading-screen,
body.page-libro-de-operaciones #loading-screen {
	display: none !important;
}

/* Sharp corners by default for all terminal elements */
body.is-terminal-home .th-tabs *,
body.is-terminal-home .th-subnav *,
body.is-terminal-home .th-status-line *,
body.is-terminal-home .th-top-bar *,
body.is-terminal-home .th-terminal *,
body.is-terminal-home .th-post-view * {
	border-radius: 0;
}

/* Custom scrollbars — pill fina translúcida (antes 14px gris oscuro; afinada 2026-06-18 para
   un look consistente con la pill flotante en TODO el sitio). Los paneles principales
   (.th-gallery-wrap, .th-sidebar) ocultan esta nativa vía .th-scrollpill-host + pill flotante;
   esta regla cubre los scrollers internos restantes (code blocks, modal, panel móvil…). */
body.is-terminal-home ::-webkit-scrollbar { width: 6px; height: 6px; }
body.is-terminal-home ::-webkit-scrollbar-track { background: transparent; }
body.is-terminal-home ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); border-radius: 100px; }
body.is-terminal-home ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.25); }
body.is-terminal-home ::-webkit-scrollbar-corner { background: transparent; }
/* Firefox scrollbar (consolidated into the main body rule above to avoid duplicate selector) */

/* ============================================================
   1. TOP TABS
   ============================================================ */
body.is-terminal-home .th-tabs {
	display: flex;
	background: var(--th-bg-tabs-bar);
	border-bottom: 1px solid #000;
	padding-top: 12px;
	padding-left: 16px;
	overflow-x: auto;
	scrollbar-width: none;
}
.th-tabs::-webkit-scrollbar { display: none; }

/* Tabs override: theme's global a { color: accent } turns these orange — force dark */
body.is-terminal-home a.th-tab,
body.is-terminal-home a.th-tab:link,
body.is-terminal-home a.th-tab:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 20px;
	background: var(--th-bg-tab) !important;
	color: var(--th-fg-tab-label) !important;
	/* No full-height border — use a centered ::after separator instead */
	border-right: 0;
	position: relative;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	outline: none;
	min-height: 32px;
	text-decoration: none !important;
}
/* Centered separator — short vertical line, recortada del top/bottom */
body.is-terminal-home a.th-tab::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 50%;
	background: var(--th-border-tab);
	transform: translateY(-50%);
	pointer-events: none;
}
/* No separator after the last tab in the row (or after spacer) */
body.is-terminal-home a.th-tab:last-of-type::after,
body.is-terminal-home a.th-tab:has(+ .th-tab-spacer)::after {
	display: none;
}
/* Force span text color (theme body sets color:var(--color-foreground) and span inherits it) */
body.is-terminal-home a.th-tab > span,
body.is-terminal-home a.th-tab > span * {
	color: var(--th-fg-tab-label) !important;
}
body.is-terminal-home a.th-tab:focus { outline: none; }
body.is-terminal-home a.th-tab:hover {
	background: var(--th-bg-tab-hi) !important;
	color: var(--th-fg-tab-label) !important;
}
body.is-terminal-home a.th-tab:hover > span {
	color: var(--th-fg-tab-label) !important;
}

body.is-terminal-home a.th-tab.th-tab-active,
body.is-terminal-home a.th-tab.th-tab-active:link,
body.is-terminal-home a.th-tab.th-tab-active:visited {
	background: #000000 !important;
	color: #FFFFFF !important;
}
/* Hide separator after active tab (cleaner edge against black bg) */
body.is-terminal-home a.th-tab.th-tab-active::after {
	display: none;
}
body.is-terminal-home a.th-tab.th-tab-active *,
body.is-terminal-home a.th-tab.th-tab-active > span,
body.is-terminal-home a.th-tab.th-tab-active > span * {
	color: #FFFFFF !important;
}
body.is-terminal-home a.th-tab.th-tab-active:hover,
body.is-terminal-home a.th-tab.th-tab-active:focus,
body.is-terminal-home a.th-tab.th-tab-active:focus-visible {
	background: #000000 !important;
	color: #FFFFFF !important;
}

body.is-terminal-home .th-tab-spacer {
	flex: 1;
	background: var(--th-bg-tabs-bar);
	border-right: 0;
}

body.is-terminal-home a.th-tab.th-tab-signin,
body.is-terminal-home a.th-tab.th-tab-signin:link,
body.is-terminal-home a.th-tab.th-tab-signin:visited {
	border-left: 0;
	border-right: 0;
	padding: 9px 22px 9px 18px;
	background: var(--th-bg-tab) !important;
	color: var(--th-fg-tab-label) !important;
}
/* v91 (2026-05-09): short centered separator on LEFT (mirrors ::after on
   regular tabs). Replaces full-height border-left for visual consistency
   with the left-side tabs (ignaciobreijo / terminal / recursos). User
   requested: "misma apariencia de lineas de separacion del extremo
   izquierdo aplicar al lado derecho". */
body.is-terminal-home a.th-tab.th-tab-signin::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 50%;
	background: var(--th-border-tab);
	transform: translateY(-50%);
	pointer-events: none;
}
body.is-terminal-home a.th-tab.th-tab-signin > span,
body.is-terminal-home a.th-tab.th-tab-signin svg {
	color: var(--th-fg-tab-label) !important;
	stroke: var(--th-fg-tab-label) !important;
}
body.is-terminal-home a.th-tab.th-tab-signin > span {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
}
body.is-terminal-home a.th-tab.th-tab-signin .th-user-icon {
	flex: 0 0 auto;
	margin-right: 2px;
	width: 15px;
	height: 15px;
}
body.is-terminal-home a.th-tab.th-tab-signin:hover {
	background: var(--th-bg-tab-hi) !important;
	color: var(--th-fg-tab-label) !important;
}

/* Stacked legal links to the right of "INICIAR SESIÓN" tab.
   v85 (2026-05-09): SOLO ajuste mínimo en padding — bottom padding (8px) >
   top padding (4px) → contenido pushed UP, lejos del borde inferior del
   navbar.
   v91 (2026-05-09): replaced full-height border-left with ::before short
   centered separator (mirrors regular tab ::after pattern). User requested
   right-side navbar separators to match left-side visual. */
body.is-terminal-home .th-tab-legal {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2px;
	padding: 4px 14px 8px 14px;
	background: var(--th-bg-tab) !important;
	border-left: 0;
	min-height: 32px;
	flex: 0 0 auto;
}
body.is-terminal-home .th-tab-legal::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 50%;
	background: var(--th-border-tab);
	transform: translateY(-50%);
	pointer-events: none;
}
body.is-terminal-home a.th-tab-legal-link,
body.is-terminal-home a.th-tab-legal-link:link,
body.is-terminal-home a.th-tab-legal-link:visited {
	color: var(--th-fg-tab-label) !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
	white-space: nowrap;
	padding: 0;
	display: block;
}
body.is-terminal-home a.th-tab-legal-link:hover {
	color: var(--th-fg-white) !important;
	text-decoration: underline !important;
}

@media (max-width: 720px) {
	body.is-terminal-home .th-tab-legal {
		display: none;
	}
}

/* ============================================================
   2. SUB-NAV
   ============================================================ */
body.is-terminal-home .th-subnav {
	display: flex;
	align-items: center;
	padding: 8px;
	margin-bottom: 16px;
	background: var(--th-bg-base);
	border-bottom: 1px solid #000;
	font-size: 11px;
	color: var(--th-fg-amber);
	min-height: 44px;
}

body.is-terminal-home .th-nav-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--th-fg-amber);
	cursor: pointer;
	user-select: none;
	font-size: 14px;
	font-weight: 600;
}
.th-nav-arrow.th-nav-arrow-disabled { color: #5a4818; cursor: not-allowed; }

body.is-terminal-home a.th-nav-btn,
body.is-terminal-home a.th-nav-btn:link,
body.is-terminal-home a.th-nav-btn:visited {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 18px;
	margin: 0 4px;
	background: #58B94E;
	color: #000 !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif;
	text-decoration: none !important;
	border-radius: 2px;
}
body.is-terminal-home a.th-nav-btn:hover {
	background: #6BCC60;
	color: #000 !important;
}
body.is-terminal-home a.th-nav-btn:focus { outline: none; }
body.is-terminal-home a.th-nav-btn:first-of-type { margin-left: 8px; }

/* "ACCEDE AL CONTENIDO" CTA button (.th-nav-btn-red is a legacy class name —
   despite its name, the button is now silver-gray with black text per
   2026-05-09 design update). Keeps the class name for hbs/template stability. */
body.is-terminal-home a.th-nav-btn.th-nav-btn-red,
body.is-terminal-home a.th-nav-btn.th-nav-btn-red:link,
body.is-terminal-home a.th-nav-btn.th-nav-btn-red:visited {
	background: #C0C0C0;
	color: #000000 !important;
}
body.is-terminal-home a.th-nav-btn.th-nav-btn-red:hover {
	background: #D8D8D8;
	color: #000000 !important;
}
body.is-terminal-home a.th-nav-btn.th-nav-btn-red > *,
body.is-terminal-home a.th-nav-btn.th-nav-btn-red span {
	color: #000000 !important;
}

/* CTA del subnav (clase .th-nav-btn-suscripcion) — label "ACTUALIZAR A PAGO"
   desde 2026-06-16; botón para miembros REGISTRADOS que aún no son de pago
   (sin estado/label paid). Se renderiza en el subnav, a la izquierda de
   X.COM/IGNACIOBREIJO, via {{#if @member}}{{#unless @member.paid}} en las
   plantillas. Mismos colores que el botón "SUSCRIPCIÓN" de mobile
   (.th-bb-mobile-link-terminal): coral #E37E54 / texto negro. OJO:
   .th-nav-btn-red es PLATEADO pese al nombre — por eso esta clase propia. */
body.is-terminal-home a.th-nav-btn.th-nav-btn-suscripcion,
body.is-terminal-home a.th-nav-btn.th-nav-btn-suscripcion:link,
body.is-terminal-home a.th-nav-btn.th-nav-btn-suscripcion:visited {
	background: #E37E54 !important;
	color: #000 !important;
}
body.is-terminal-home a.th-nav-btn.th-nav-btn-suscripcion:hover,
body.is-terminal-home a.th-nav-btn.th-nav-btn-suscripcion:active {
	background: #F09063 !important;
	color: #000 !important;
}
body.is-terminal-home a.th-nav-btn.th-nav-btn-suscripcion > *,
body.is-terminal-home a.th-nav-btn.th-nav-btn-suscripcion span {
	color: #000 !important;
}

/* ------------------------------------------------------------
   /suscripcion/ — ocultar botones sociales del subnav
   ------------------------------------------------------------
   Los botones verdes del subnav (X.COM/IGNACIOBREIJO, BOLSA DE COMERCIO,
   CONTACTO@…) NO deben verse en la página de suscripción. En carga normal
   ya no aparecen (page-suscripcion.hbs no los incluye), pero la navegación
   SPA del tema CONSERVA el subnav del home, así que los botones verdes
   reaparecen al pasar de home a "ACTUALIZAR A PAGO". #th-sp = el paywall,
   ÚNICO de /suscripcion/. :has() se reevalúa en vivo cuando el SPA inyecta
   el contenido → oculta los verdes apenas aparece el paywall, y vuelven a
   mostrarse al navegar fuera. Se MANTIENE el CTA "ACCEDE AL CONTENIDO"
   (.th-nav-btn-red). */
body:has(#th-sp) .th-subnav a.th-nav-btn:not(.th-nav-btn-red) {
	display: none !important;
}

/* ============================================================
   3. STATUS LINE
   ============================================================ */
/* NOTE: .th-status-line / .th-sl-row / .th-sl-spacer / .th-sl-date /
   #th-gh-date rules removed 2026-05-09 — date display replaced with
   .th-sl-quote inside .th-subnav. See the .th-subnav .th-sl-quote rules
   further down in this file. */

/* ============================================================
   SIGNUP FORM — Windows XP "Luna" inspired aesthetic (enhanced)
   - Window-caption bar style label with luna gradient
   - Sunken 3D inset input with classic XP edge highlights
   - Beveled blue gradient button (Luna start-button feel)
   - Tahoma font, classic XP typography
   ============================================================ */

/* Container around label + form so the title bar visually "owns" the field */
/* ─── XP "Luna" window — exterior frame ─────────────────────────────
   Authentic Luna window chrome:
   • Outer 1px border #0831D9 (Luna outer blue)
   • Inner 1px highlight #FFFFFF (the "shine" of XP windows)
   • Drop shadow: cyan-tinted (matches XP shadow rendering)
   • Subtle bottom gradient on client area for depth
   ───────────────────────────────────────────────────────────────── */
body.is-terminal-home .th-bb-signup {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 0 !important;
	flex: 0 0 auto;
	margin-left: auto;
	/* Unified XP body fill (v74 2026-05-09) — matches .th-paywall-inline-card.
	   Subtle 5-stop gradient: top edge slightly lighter (light source),
	   bottom edge slightly darker (panel volume). Authentic XP Luna look
	   without the heavy directional bevel that breaks the aesthetic. */
	background: linear-gradient(180deg,
		#F4F2E5 0%,
		#ECE9D8 3%,
		#ECE9D8 92%,
		#E5E1CF 97%,
		#DCD8C6 100%);
	border: 1px solid #0831D9;
	box-shadow:
		inset 0 0 0 1px #FFFFFF,
		inset 0 0 0 2px #DCE7F5,
		0 0 0 1px rgba(8, 49, 217, 0.10),
		0 6px 18px rgba(0, 30, 100, 0.35),
		0 2px 4px rgba(0, 0, 0, 0.20);
	padding: 0;
	border-radius: 8px 8px 4px 4px;
	overflow: hidden;
	position: relative;
}

/* ─── Title bar — authentic Luna 7-stop gradient ────────────────────
   Real XP Luna title bar has these reference colors:
     0%: #0997FF (top highlight)
     4%: #0064D7
     6%: #005CD8
     8%: #0855D4 (saturation peak)
     14%: #0050A4 (mid solid)
     56%: #0050A4
     90%: #005DC1 (lower band)
     100%: #001F71 (bottom shadow)
   We add a lock icon on the left + 2 fake window controls on the right
   (minimize + maximize) for full XP authenticity. The X close button is
   intentionally omitted (matches paywall design). */
body.is-terminal-home .th-signup-label {
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100%;
	font-size: 11.5px;
	color: #FFFFFF !important;
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 700;
	margin: 0 !important;
	padding: 6px 14px 6px 26px !important;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif !important;
	opacity: 1;
	background: linear-gradient(180deg,
		#0997FF 0%,
		#0064D7 4%,
		#005CD8 6%,
		#0855D4 8%,
		#0050A4 14%,
		#0050A4 56%,
		#005DC1 90%,
		#001F71 100%) !important;
	border: 0 !important;
	border-bottom: 1px solid #001F71 !important;
	border-radius: 6px 6px 0 0 !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.45),
		inset 0 -1px 0 rgba(0,0,0,0.15);
	text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.30);
	line-height: 1.4;
	box-sizing: border-box;
	min-height: 24px;
	user-select: none;
}
/* Lock icon on the left of the title bar */
body.is-terminal-home .th-signup-label::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFE082' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='1.5'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.95;
	pointer-events: none;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
}
/* Window controls removed (v68): no minimize/maximize/close buttons.
   Title bar shows only lock icon + label text — clean, no clutter. */

/* Form body — XP "client area" containing the alert + form + button */
body.is-terminal-home .th-bb-signup .th-signup-row {
	background: transparent;
	padding: 12px 14px !important;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}
body.is-terminal-home .th-bb-signup .th-signup-form {
	background: transparent;
	padding: 0 !important;
	width: auto;
	box-sizing: content-box;
}

/* Wrapper: form + button as siblings — fused (no gap) */
body.is-terminal-home .th-signup-form {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	flex: 0 0 auto;
	gap: 0 !important;
	height: auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Input "field" — XP sunken bevel */
body.is-terminal-home .th-signup-form > form.th-email-input {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	background: #ffffff !important;
	height: 24px !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	gap: 0 !important;
	box-sizing: content-box;
	/* XP sunken textbox: dark border + inset shadow simulating depth */
	border: 1px solid !important;
	border-top-color: #7F9DB9 !important;
	border-left-color: #7F9DB9 !important;
	border-right-color: #C5CDD3 !important;
	border-bottom-color: #C5CDD3 !important;
	border-radius: 0 !important;
	box-shadow:
		inset 1px 1px 0 #404040,
		inset -1px -1px 0 #FFFFFF !important;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
body.is-terminal-home .th-signup-form > form.th-email-input:focus-within {
	border-color: #0A66C2 !important;
	border-top-color: #0A66C2 !important;
	border-left-color: #0A66C2 !important;
	border-right-color: #5C9CCC !important;
	border-bottom-color: #5C9CCC !important;
	box-shadow:
		inset 1px 1px 0 #0A4682,
		inset -1px -1px 0 #B6D4F0,
		0 0 0 1px rgba(10, 102, 194, 0.30) !important;
}

/* Email icon — small, classic XP blue */
body.is-terminal-home .th-signup-form > form.th-email-input > .th-email-tri {
	width: 22px !important;
	height: 22px !important;
	background: transparent !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	color: #5A8BB8 !important;
}
body.is-terminal-home .th-signup-form > form.th-email-input > .th-email-tri svg {
	display: block;
	color: inherit;
	width: 12px;
	height: 12px;
}
body.is-terminal-home .th-signup-form > form.th-email-input:focus-within > .th-email-tri {
	color: #0A66C2 !important;
}

/* Input field — Tahoma 11px */
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"] {
	background: transparent !important;
	border: 0 !important;
	padding: 0 6px 0 2px !important;
	color: #000000 !important;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	outline: none !important;
	width: 220px !important;
	min-width: 0 !important;
	max-width: 220px !important;
	height: 22px !important;
	min-height: 22px !important;
	caret-color: #000000;
	box-shadow: none !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	align-self: stretch !important;
	display: inline-block !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	-webkit-text-fill-color: #000000 !important;
}
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"]:hover,
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"]:focus,
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"]:active {
	color: #000000 !important;
	background: transparent !important;
	-webkit-text-fill-color: #000000 !important;
}
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"]:-webkit-autofill,
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"]:-webkit-autofill:hover,
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"]:-webkit-autofill:focus {
	-webkit-text-fill-color: #000000 !important;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
	caret-color: #000000 !important;
	transition: background-color 9999s ease-in-out 0s;
}
body.is-terminal-home .th-signup-form > form.th-email-input > input[type="email"]::placeholder {
	color: #666 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
	font-style: italic;
	opacity: 1;
}

/* REGISTRARSE button — XP Luna start-button with authentic gloss reflection */
body.is-terminal-home .th-signup-form > button.th-signup-btn,
body.is-terminal-home button.th-signup-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 24px !important;
	min-height: 24px !important;
	padding: 0 16px !important;
	/* Multi-stop Luna gradient with reflection at top */
	background:
		linear-gradient(180deg,
			rgba(255,255,255,0.55) 0%,
			rgba(255,255,255,0.05) 47%,
			rgba(255,255,255,0.0) 48%,
			rgba(0,0,0,0.05) 100%),
		linear-gradient(180deg, #4FA4EE 0%, #2474C9 50%, #155DAB 100%) !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif !important;
	border: 1px solid #003C74 !important;
	border-radius: 4px !important;
	margin: 0 0 0 -1px !important;
	flex: 0 0 auto !important;
	align-self: center !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	opacity: 1 !important;
	position: static !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.45),
		inset 0 -1px 0 rgba(0,0,0,0.20),
		0 1px 2px rgba(0,0,0,0.25) !important;
	text-shadow: 0 1px 0 rgba(0,0,0,0.45);
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
	z-index: 1;
}
body.is-terminal-home .th-signup-form > button.th-signup-btn > span {
	color: #ffffff !important;
	position: relative;
	z-index: 1;
}
body.is-terminal-home .th-signup-form > button.th-signup-btn .th-signup-btn-icon {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	color: #ffffff;
	transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 1;
}
body.is-terminal-home .th-signup-form > button.th-signup-btn:hover,
body.is-terminal-home button.th-signup-btn:hover {
	background:
		linear-gradient(180deg,
			rgba(255,255,255,0.65) 0%,
			rgba(255,255,255,0.10) 47%,
			rgba(255,255,255,0.0) 48%,
			rgba(0,0,0,0.05) 100%),
		linear-gradient(180deg, #65B5F2 0%, #2D89DD 50%, #1D6EBE 100%) !important;
	color: #ffffff !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.55),
		inset 0 -1px 0 rgba(0,0,0,0.20),
		0 1px 3px rgba(0,0,0,0.30) !important;
}
body.is-terminal-home .th-signup-form > button.th-signup-btn:hover .th-signup-btn-icon {
	transform: translateX(2px);
}
body.is-terminal-home .th-signup-form > button.th-signup-btn:active,
body.is-terminal-home button.th-signup-btn:active {
	background:
		linear-gradient(180deg,
			rgba(0,0,0,0.05) 0%,
			rgba(0,0,0,0.10) 100%),
		linear-gradient(180deg, #155DAB 0%, #0F4F92 100%) !important;
	box-shadow:
		inset 0 1px 3px rgba(0,0,0,0.40) !important;
	transform: translateY(1px);
}
body.is-terminal-home button.th-signup-btn:focus,
body.is-terminal-home button.th-signup-btn:focus-visible {
	outline: 1px dotted rgba(255,255,255,0.85) !important;
	outline-offset: -4px;
}

/* Signup row — horizontal layout with alert on left, form on right */
body.is-terminal-home .th-signup-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	width: 100%;
}

body.is-terminal-home .th-form-alert {
	display: inline-flex !important;
	align-items: center;
	font-size: 11px;
	color: var(--th-fg-text-dim);
	margin: 0;
	flex: 0 1 auto;
	max-width: 320px;
	min-width: 0;
}
body.is-terminal-home .th-form-alert[hidden] {
	display: none !important;
}
/* Legacy support: also show if Ghost adds .is-visible */
body.is-terminal-home .th-form-alert.is-visible {
	display: inline-flex !important;
}
body.is-terminal-home .th-form-alert .th-form-success {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	color: #1F5F2A !important;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.45;
	background: #F0F8F1;
	border: 1px solid #B8D9BC;
	border-left: 3px solid #2E8540;
	border-radius: 2px;
	padding: 7px 11px 7px 10px;
	box-shadow: none;
	text-shadow: none;
}
body.is-terminal-home .th-form-alert .th-form-success-icon {
	flex: 0 0 auto;
	color: #2E8540;
	margin-top: 1px;
}
body.is-terminal-home .th-form-alert .th-form-success > span {
	color: #1F5F2A !important;
	flex: 1 1 auto;
}
body.is-terminal-home .th-form-alert .th-form-error {
	color: #8C1A22 !important;
	font-size: 11px;
	font-weight: 500;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif !important;
	background: #FBF1F1;
	border: 1px solid #DEB7B7;
	border-left: 3px solid #B92E2E;
	border-radius: 2px;
	padding: 7px 11px 7px 10px;
}
body.is-terminal-home .th-form-alert .th-form-error:empty {
	display: none;
}

/* ============================================================
   4. TOP BAR — red strip
   ============================================================ */
body.is-terminal-home .th-top-bar {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: #7D1E22;
	color: #ffffff !important;
	font-size: 12px;
	letter-spacing: 0.04em;
	border-top: 1px solid #4d1216;
	border-bottom: 1px solid #4d1216;
	min-height: 28px;
}
body.is-terminal-home .th-top-bar,
body.is-terminal-home .th-top-bar > *,
body.is-terminal-home .th-top-bar span {
	color: #ffffff !important;
}

/* Orange Bloomberg-style pill at the very left of the red bar.
   Shows current context: 'INICIO' default, post title when reading a post.
   Fixed width (380px) so post titles get a consistent slot — without this,
   long titles would either truncate the pill mid-letter or push the rest
   of the topbar around as the user navigates between posts.
   Uppercase text at 16px on the 28px pill — bold + uppercase keeps the
   Bloomberg-terminal aesthetic without the aggressive presence of larger
   sizes. line-height:1 prevents overflow against the pill's fixed height. */
body.is-terminal-home .th-tb-pill,
body.is-terminal-home #th-tb-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start;
	background: #EEA020 !important;
	color: #000 !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	padding: 0 16px !important;
	border-right: 2px solid #4d1216;
	min-height: 28px;
	height: 28px;
	flex: 0 0 380px;
	width: 380px;
	max-width: 380px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* BUSCAR button fused to the right of the pill — triggers Ghost search modal */
body.is-terminal-home button.th-tb-search {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	background: #2a2a2a !important;
	color: var(--th-fg-white) !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-right: 2px solid #4d1216 !important;
	border-radius: 0 !important;
	min-height: 28px !important;
	height: 28px !important;
	flex: 0 0 auto !important;
	cursor: pointer !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: background-color 0.12s ease !important;
}
body.is-terminal-home button.th-tb-search:hover {
	background: #3a3a3a !important;
	color: var(--th-fg-white) !important;
}
body.is-terminal-home button.th-tb-search:focus-visible {
	outline: 2px solid #EEA020 !important;
	outline-offset: -2px;
}
body.is-terminal-home button.th-tb-search > span {
	color: inherit !important;
	line-height: 1 !important;
}
body.is-terminal-home button.th-tb-search .th-tb-search-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: var(--th-fg-white) !important;
}

/* VOLVER ATRÁS link — white, hidden by default; JS toggles via [hidden] attr */
body.is-terminal-home a.th-tb-back,
body.is-terminal-home a.th-tb-back:link,
body.is-terminal-home a.th-tb-back:visited {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: var(--th-fg-white) !important;
	background: transparent !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	padding: 0 14px !important;
	margin-left: 14px;
	min-height: 28px;
	height: 28px;
	cursor: pointer;
	flex: 0 0 auto;
	transition: opacity 0.12s ease;
}
body.is-terminal-home a.th-tb-back[hidden] {
	display: none !important;
}
body.is-terminal-home a.th-tb-back:hover {
	color: var(--th-fg-white) !important;
	opacity: 0.75;
	text-decoration: underline !important;
}
body.is-terminal-home a.th-tb-back > span {
	color: inherit !important;
	line-height: 1 !important;
}
body.is-terminal-home a.th-tb-back .th-tb-back-arrow {
	font-size: 14px;
	display: inline-block;
	transition: transform 0.12s ease;
}
body.is-terminal-home a.th-tb-back:hover .th-tb-back-arrow {
	transform: translateX(-2px);
}

/* ============================================================
   5. MAIN GRID (terminal)
   ============================================================ */
body.is-terminal-home .th-terminal {
	flex: 1;
	display: grid;
	grid-template-columns: 60px 320px 1fr;
	gap: 0;
	min-height: 0;
	background: var(--th-bg-base);
}

.th-page-margin-left { background: var(--th-bg-base); }

/* ============================================================
   6. SIDEBAR
   ============================================================ */
body.is-terminal-home .th-sidebar {
	background: var(--th-bg-sidebar);
	border-right: 1px solid rgba(255,255,255,0.06);
	padding: 4px 0 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.15) transparent;
}
body.is-terminal-home .th-sidebar::-webkit-scrollbar { width: 8px; }
body.is-terminal-home .th-sidebar::-webkit-scrollbar-track { background: transparent; }
body.is-terminal-home .th-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.10);
	border-radius: 0;
	border: 0;
}
body.is-terminal-home .th-sidebar::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,0.20);
}

body.is-terminal-home a.th-side-row,
body.is-terminal-home a.th-side-row:link,
body.is-terminal-home a.th-side-row:visited {
	display: flex;
	align-items: center;
	padding: 7px 18px;
	color: var(--th-fg-white) !important;
	cursor: pointer;
	font-size: 14.5px;
	letter-spacing: 0;
	gap: 8px;
	user-select: none;
	border-left: 2px solid transparent;
	text-decoration: none !important;
	transition: background-color 0.12s ease, color 0.12s ease;
	min-height: 32px;
	box-sizing: border-box;
}
body.is-terminal-home a.th-side-row > span,
body.is-terminal-home a.th-side-row > span * {
	color: var(--th-fg-white) !important;
}
body.is-terminal-home a.th-side-row:hover {
	background: rgba(255,255,255,0.04) !important;
	color: var(--th-fg-white) !important;
}
body.is-terminal-home a.th-side-row:hover > span,
body.is-terminal-home a.th-side-row:hover .th-side-label,
body.is-terminal-home a.th-side-row:hover .th-side-count,
body.is-terminal-home a.th-side-row:hover .th-side-caret {
	color: var(--th-fg-white) !important;
}

body.is-terminal-home a.th-side-row.th-active,
body.is-terminal-home a.th-side-row.th-active:link,
body.is-terminal-home a.th-side-row.th-active:visited,
body.is-terminal-home a.th-side-row.th-active:hover {
	background: var(--th-bg-selected) !important;
	color: var(--th-fg-white) !important;
	border-left-color: var(--th-bg-selected) !important;
	border-left-width: 2px !important;
}
body.is-terminal-home a.th-side-row.th-active .th-side-label {
	color: var(--th-fg-white) !important;
	font-weight: 600 !important;
	opacity: 1 !important;
}
body.is-terminal-home a.th-side-row.th-active .th-side-count {
	color: var(--th-fg-white) !important;
	background: transparent !important;
	opacity: 1;
}
body.is-terminal-home a.th-side-row.th-active .th-side-caret {
	color: var(--th-fg-white) !important;
	opacity: 1 !important;
}

body.is-terminal-home .th-side-row.th-all-posts {
	font-weight: 600 !important;
	font-size: 14.5px !important;
	margin-bottom: 6px;
	margin-top: 8px;
	padding-top: 9px;
	padding-bottom: 9px;
	min-height: 38px;
}
body.is-terminal-home .th-side-row.th-all-posts .th-side-caret {
	width: 4px;
	height: 4px;
	background: var(--th-fg-white);
	border-radius: 50%;
	opacity: 0.7;
	margin-right: 4px;
}
body.is-terminal-home .th-side-row.th-all-posts .th-side-caret::before {
	display: none;
}
body.is-terminal-home .th-side-row.th-all-posts:hover .th-side-caret {
	opacity: 1;
	background: var(--th-fg-amber);
	box-shadow: 0 0 4px rgba(252,168,46,0.5);
}
body.is-terminal-home .th-side-row.th-all-posts.th-active .th-side-caret {
	background: var(--th-fg-amber);
	opacity: 1;
}

body.is-terminal-home .th-side-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--th-fg-white) !important;
	font-weight: 600;
	font-size: 11px;
	padding: 22px 18px 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.45;
	margin-top: 0;
	border-top: 0;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif;
}
body.is-terminal-home .th-side-heading::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: rgba(255,255,255,0.08);
}
body.is-terminal-home .th-side-heading:first-of-type,
body.is-terminal-home .th-sidebar > .th-side-row:first-child + .th-side-heading {
	margin-top: 4px;
}

body.is-terminal-home .th-side-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: var(--th-fg-white);
	font-size: 8px;
	flex: 0 0 auto;
	transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0.55;
}
.th-side-row.is-expandable .th-side-caret::before { content: '▶'; display: block; }
.th-side-row.is-expanded .th-side-caret { transform: rotate(90deg); opacity: 0.85; }
.th-side-row.is-expanded .th-side-caret::before { content: '▶'; }

.th-side-label { flex: 1; }

/* Count: small numeric badge on the right (cleaner than mixed-in number) */
body.is-terminal-home .th-side-count {
	color: #FFFFFF !important;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif;
	font-weight: 500;
	background: transparent !important;
	padding: 0;
	border-radius: 0;
	min-width: 0;
	text-align: right;
	line-height: 1;
	opacity: 1;
	transition: opacity 0.12s ease;
}

.th-side-children { display: none; }
.th-side-children.is-open { display: block; }

/* Accessibility: visible focus ring for keyboard users */
body.is-terminal-home a.th-side-row:focus-visible {
	outline: 2px solid var(--th-fg-amber) !important;
	outline-offset: -2px;
	background: rgba(252,168,46,0.10) !important;
}

/* Active row indicator — left vertical accent bar */
body.is-terminal-home a.th-side-row.th-active {
	background: var(--th-bg-selected) !important;
	border-left-color: var(--th-fg-amber) !important;
}

/* ============================================================
   ARCHIVE TREE — INDENTED HIERARCHY (mes → semana → post)
   Clean indent-only structure (no bracket lines). The increasing
   padding-left differentiates the levels visually:
     mes       padding-left 18px  (font-size 13.5px, weight 600)
     semana    padding-left 32px  (font-size 13px,   weight 500)
     post      padding-left 46px  (font-size 12.5px, weight 400)
   ============================================================ */

/* ─── Level 1: Month ────────────────────────────────────────────────
   Top-level: bold, sentence case (Abril, 2026 — no uppercase). */
body.is-terminal-home .th-side-row.th-archive-month {
	font-weight: 600 !important;
	font-size: 13.5px !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
	color: var(--th-fg-white) !important;
	padding-left: 18px !important;
	padding-right: 14px !important;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	margin-top: 6px !important;
	min-height: 36px !important;
	position: relative !important;
}
body.is-terminal-home .th-side-row.th-archive-month:first-child {
	margin-top: 0;
}
body.is-terminal-home .th-side-row.th-archive-month .th-side-label {
	color: var(--th-fg-white) !important;
	font-weight: 600 !important;
	text-transform: none !important;
}
body.is-terminal-home .th-side-row.th-archive-month .th-side-count {
	background: transparent !important;
	font-size: 13px;
	opacity: 1 !important;
	color: #FFFFFF !important;
}
body.is-terminal-home .th-side-row.th-archive-month .th-side-caret {
	color: var(--th-fg-white) !important;
	opacity: 0.65;
}
body.is-terminal-home .th-side-row.th-archive-month:hover {
	background: rgba(255,255,255,0.03) !important;
}
body.is-terminal-home .th-side-row.th-archive-month:hover .th-side-caret {
	opacity: 1;
}

/* ─── Level 2: Week — child of month ────────────────────────────────
   Indent only — no bracket lines. Lighter weight than month. */
body.is-terminal-home .th-archive-weeks {
	position: relative;
	padding: 0 0 6px;
	margin-left: 0;
}
body.is-terminal-home .th-side-row.th-archive-week {
	padding-left: 32px !important;
	padding-right: 14px !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--th-fg-white) !important;
	letter-spacing: 0.02em !important;
	min-height: 30px !important;
	position: relative !important;
}
/* Brackets removed — clean indented hierarchy only */
body.is-terminal-home .th-side-row.th-archive-week::before,
body.is-terminal-home .th-side-row.th-archive-week::after {
	display: none !important;
	content: none !important;
}
body.is-terminal-home .th-archive-weeks > .th-archive-posts::before {
	display: none !important;
	content: none !important;
}
body.is-terminal-home .th-side-row.th-archive-week .th-side-label {
	color: var(--th-fg-white) !important;
	opacity: 0.82;
}
body.is-terminal-home .th-side-row.th-archive-week .th-side-count {
	background: transparent !important;
	font-size: 12px;
	min-width: 0;
	padding: 0;
	opacity: 1 !important;
	color: #FFFFFF !important;
}
body.is-terminal-home .th-side-row.th-archive-week .th-side-caret {
	color: var(--th-fg-white) !important;
	width: 12px;
	font-size: 7px;
	opacity: 0.5;
}
body.is-terminal-home .th-side-row.th-archive-week:hover {
	background: rgba(255,255,255,0.03) !important;
}
body.is-terminal-home .th-side-row.th-archive-week:hover .th-side-label {
	opacity: 1;
}

/* ─── Level 3: Posts — child of week ────────────────────────────────
   Deeper indent only — no bracket lines. */
body.is-terminal-home .th-archive-posts {
	padding: 0 0 4px;
	margin-left: 0;
}
body.is-terminal-home .th-side-row.th-archive-post {
	padding-left: 46px !important;
	padding-right: 14px !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	gap: 0;
	min-height: 28px !important;
	position: relative !important;
	/* OPT-M (2026-05-09): content-visibility: auto skips layout/paint
	   when the item is outside the viewport. With 100s of archive posts
	   in a tall sidebar, this saves real CPU during scrolling. The
	   contain-intrinsic-size reserves the expected height (28px) so
	   scrollbars don't jump as items render. */
	content-visibility: auto;
	contain-intrinsic-size: auto 28px;
}
/* Brackets removed */
body.is-terminal-home .th-side-row.th-archive-post::before,
body.is-terminal-home .th-side-row.th-archive-post::after {
	display: none !important;
	content: none !important;
}
/* Hide the dot — clean indent only */
body.is-terminal-home .th-side-row.th-archive-post .th-day-dot {
	display: none;
}
body.is-terminal-home .th-side-row.th-archive-post .th-side-label {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	color: var(--th-fg-white) !important;
	opacity: 0.78;
	font-weight: 400 !important;
	margin-right: 8px;
}
body.is-terminal-home .th-side-row.th-archive-post .th-side-count {
	font-size: 11.5px !important;
	flex: 0 0 auto;
	color: var(--th-fg-white) !important;
	background: transparent;
	padding: 0;
	border-radius: 0;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	opacity: 0.42;
	min-width: 0;
	text-align: right;
	align-self: center;
	margin-top: 0;
}
body.is-terminal-home .th-side-row.th-archive-post:hover {
	background: rgba(255,255,255,0.03) !important;
}
body.is-terminal-home .th-side-row.th-archive-post:hover .th-side-label {
	opacity: 1;
}
body.is-terminal-home .th-side-row.th-archive-post:hover .th-side-count {
	opacity: 0.8;
}
body.is-terminal-home .th-side-row.th-archive-post:hover::after {
	background: rgba(255,255,255,0.18);
}

/* Backward-compat: in case any old .th-archive-day still gets rendered */
body.is-terminal-home .th-side-row.th-archive-day {
	padding-left: 44px;
	font-size: 13px;
}
body.is-terminal-home .th-side-row.th-archive-day .th-day-dot {
	width: 4px; height: 4px;
	background: var(--th-fg-amber);
	margin-right: 6px;
	flex: 0 0 auto;
}

/* ============================================================
   7. GALLERY
   ============================================================ */
/* ============================================================
   BRAND BLOCK (above the cards) — logo + site/tagline + signup
   ============================================================ */
body.is-terminal-home .th-brand-block {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 22px 32px;
	margin-bottom: 8px;
	background: var(--th-bg-base);
	border-bottom: 1px solid var(--th-border-hi);
	flex-wrap: wrap;
}
body.is-terminal-home a.th-bb-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 80px;
	width: 80px;
	text-decoration: none !important;
}
body.is-terminal-home a.th-bb-logo img {
	display: block;
	height: 80px;
	width: auto;
	max-width: 80px;
	object-fit: contain;
}
body.is-terminal-home .th-bb-text-stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 1 auto;
	max-width: 420px;
	min-width: 0;
}
body.is-terminal-home a.th-bb-site,
body.is-terminal-home a.th-bb-site:link,
body.is-terminal-home a.th-bb-site:visited {
	color: var(--th-fg-white) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-decoration: none !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	line-height: 1.2;
}
body.is-terminal-home a.th-bb-site:hover {
	color: #ffffff !important;
}
body.is-terminal-home .th-bb-tagline {
	color: #EEA020 !important;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0;
	display: block;
	max-width: 480px;
}
body.is-terminal-home .th-bb-signup {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

@media (max-width: 720px) {
	body.is-terminal-home .th-brand-block {
		gap: 12px;
		padding: 14px 16px 24px;
	}
	body.is-terminal-home .th-bb-text-stack {
		max-width: none;
	}
	body.is-terminal-home .th-bb-tagline {
		max-width: none;
	}
	body.is-terminal-home .th-bb-signup {
		margin-left: 0;
		width: 100%;
		align-items: stretch;
	}
}

body.is-terminal-home .th-gallery-wrap {
	background: var(--th-bg-base);
	padding: 16px 22px 28px;
	overflow-y: auto;
}
/* On page-terminal.hbs only, more top breathing room — content needs space from
   red bar to feel deliberate, not crammed. Excluded from post.hbs (also has
   is-terminal-page) by negating th-postview-open. */
body.is-terminal-page:not(.th-postview-open) .th-gallery-wrap {
	padding-top: 40px;
}

body.is-terminal-home .th-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 18px;
}

/* ─── DOUBLE-PAGE GRID (page-terminal.hbs) ─────────────────────────
   Two columns side-by-side: terminal-hero (left) + page content (right) */
body.is-terminal-home .th-gallery-double,
body.is-terminal-home .th-gallery.th-gallery-double {
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0;
}

/* Raw content wrapper — used in /terminal/ to render posts/pages WITHOUT
   any global theme overrides. Posts can ship their own <style> block and
   custom classes that work as authored. We only enforce safety: clamp
   media to container, ensure scripts can run, prevent overflow. */
body.is-terminal-home .th-raw-content {
	width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
	color: #EEA020;  /* Theme uses amber on body; raw content inherits it instead of inheriting from --th-fg-white */
	/* 2026-05-12: removed `text-align: center`. El contenido inline de los
	   posts/páginas embebidos en /terminal/ (terminal-hero + página) ahora
	   controla su propia alineación. La regla central interfería con cards
	   que necesitan alineación derecha (Doc 2) sin agregar valor real al
	   terminal-hero (Doc 1) que ya pone text-align en sus elementos. */
}
body.is-terminal-home .th-raw-content img,
body.is-terminal-home .th-raw-content video,
body.is-terminal-home .th-raw-content iframe,
body.is-terminal-home .th-raw-content embed,
body.is-terminal-home .th-raw-content object,
body.is-terminal-home .th-raw-content canvas {
	max-width: 100%;
	height: auto;
}
/* Defensive reset: built/index.css has aggressive global rules like
   `form { display:flex; flex-direction:column }` and `form input { width:100% !important }`
   that break layouts the post author designed. Neutralize them here so the
   post's own CSS takes over. */
body.is-terminal-home .th-raw-content form {
	display: block;
	flex-direction: row;
	width: auto;
	margin: 0;
	padding: 0;
}
body.is-terminal-home .th-raw-content form input,
body.is-terminal-home .th-raw-content form select,
body.is-terminal-home .th-raw-content form textarea {
	width: auto;
	max-width: none;
}
/* Buttons inside raw content keep their author styling (no global card-button rules) */
body.is-terminal-home .th-raw-content button {
	all: revert;
}
/* Links inside raw content: don't force amber from card rules; let post styles paint */
body.is-terminal-home .th-raw-content a,
body.is-terminal-home .th-raw-content a:link,
body.is-terminal-home .th-raw-content a:visited {
	color: inherit;
	text-decoration: inherit;
}

/* ─── MERGED PAGE LAYOUT (page-terminal.hbs) ───────────────────────
   El contenido de la página `/terminal/` controla TODO su layout
   internamente (CSS Grid de 2 columnas en el HTML del contenido).
   El theme solo provee un contenedor full-width transparente. */
body.is-terminal-home .th-merged-page {
	width: 100%;
	min-width: 0;
	background: transparent;
	padding: 0;
	color: #EEA020;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
body.is-terminal-home .th-merged-page .th-raw-content {
	/* hereda los safety overrides ya definidos en .th-raw-content más abajo
	   (img max-width, form reset, button revert, link colors) */
	width: 100%;
}

/* ─── SINGLE-PAGE GRID (page.hbs default) ──────────────────────────
   One full-width column for generic pages like /recursos-gratuitos/ */
body.is-terminal-home .th-gallery-single,
body.is-terminal-home .th-gallery.th-gallery-single {
	grid-template-columns: 1fr;
	gap: 0;
	padding: 0;
}
body.is-terminal-home .th-page-col-full {
	max-width: 920px;
	margin: 0 auto;
	width: 100%;
	padding: 36px 44px 48px;
}
body.is-terminal-home .th-page-col-excerpt {
	color: var(--th-fg-text) !important;
	font-size: 16px;
	line-height: 1.5;
	margin: -8px 0 24px;
	font-style: italic;
}
body.is-terminal-home .th-page-col {
	background: var(--th-bg-card);
	padding: 28px 28px 36px;
	color: var(--th-fg-white);
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif;
	overflow-wrap: break-word;
	min-width: 0;
}
/* On the /terminal/ page (page-terminal.hbs), columns are transparent,
   no padding, no titles — content flows raw, terminal-hero styles itself. */
body.is-terminal-page.is-terminal-page--terminal .th-page-col,
body.is-terminal-home .th-gallery.th-gallery-double .th-page-col {
	background: transparent !important;
	padding: 0 !important;
}
body.is-terminal-home .th-gallery.th-gallery-double .th-page-col-title {
	display: none !important;
}
body.is-terminal-home .th-page-col-title {
	color: var(--th-fg-white) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	margin: 0 0 18px !important;
	letter-spacing: -0.01em !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	border-bottom: 1px solid rgba(255,255,255,0.22);
	padding-bottom: 14px;
}
body.is-terminal-home .th-page-col-body {
	color: var(--th-fg-white);
	font-size: 14.5px;
	line-height: 1.65;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
body.is-terminal-home .th-page-col-body * {
	max-width: 100%;
}
body.is-terminal-home .th-page-col-body p,
body.is-terminal-home .th-page-col-body li,
body.is-terminal-home .th-page-col-body td,
body.is-terminal-home .th-page-col-body th,
body.is-terminal-home .th-page-col-body span,
body.is-terminal-home .th-page-col-body strong,
body.is-terminal-home .th-page-col-body em,
body.is-terminal-home .th-page-col-body b,
body.is-terminal-home .th-page-col-body i {
	color: var(--th-fg-white) !important;
	line-height: 1.65;
}
body.is-terminal-home .th-page-col-body p {
	font-size: 14.5px;
	margin: 0 0 14px;
}
body.is-terminal-home .th-page-col-body strong,
body.is-terminal-home .th-page-col-body b {
	font-weight: 700;
}
body.is-terminal-home .th-page-col-body h1,
body.is-terminal-home .th-page-col-body h2,
body.is-terminal-home .th-page-col-body h3,
body.is-terminal-home .th-page-col-body h4,
body.is-terminal-home .th-page-col-body h5,
body.is-terminal-home .th-page-col-body h6 {
	color: var(--th-fg-amber) !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 600;
	margin: 24px 0 10px;
	letter-spacing: 0;
	line-height: 1.3;
}
body.is-terminal-home .th-page-col-body h1 { font-size: 22px; }
body.is-terminal-home .th-page-col-body h2 { font-size: 18px; }
body.is-terminal-home .th-page-col-body h3 { font-size: 16px; }
body.is-terminal-home .th-page-col-body h4 { font-size: 14.5px; }
body.is-terminal-home .th-page-col-body h5,
body.is-terminal-home .th-page-col-body h6 { font-size: 13.5px; }
body.is-terminal-home .th-page-col-body a,
body.is-terminal-home .th-page-col-body a:link,
body.is-terminal-home .th-page-col-body a:visited {
	color: var(--th-fg-amber) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
body.is-terminal-home .th-page-col-body a:hover {
	color: var(--th-fg-amber-bri, #ffb84d) !important;
}
body.is-terminal-home .th-page-col-body ul,
body.is-terminal-home .th-page-col-body ol {
	margin: 0 0 14px 22px;
	padding: 0;
}
body.is-terminal-home .th-page-col-body li {
	margin: 4px 0;
}
body.is-terminal-home .th-page-col-body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 14px 0;
	border-radius: 2px;
}
body.is-terminal-home .th-page-col-body figure {
	margin: 18px 0;
	max-width: 100%;
}
body.is-terminal-home .th-page-col-body figure img { margin: 0; }
body.is-terminal-home .th-page-col-body figcaption {
	color: var(--th-fg-text-dim) !important;
	font-size: 12px;
	margin-top: 6px;
	text-align: center;
	font-style: italic;
}
body.is-terminal-home .th-page-col-body code {
	background: rgba(255,255,255,0.18);
	color: var(--th-fg-amber);
	padding: 1px 5px;
	border-radius: 2px;
	font-family: 'Iosevka', ui-monospace, monospace;
	font-size: 0.92em;
}
body.is-terminal-home .th-page-col-body pre {
	background: #0a0a0a;
	color: var(--th-fg-white);
	padding: 14px;
	border-radius: 3px;
	border: 1px solid rgba(255,255,255,0.22);
	overflow-x: auto;
	margin: 14px 0;
	font-size: 12.5px;
	line-height: 1.5;
}
body.is-terminal-home .th-page-col-body pre code {
	background: transparent;
	color: inherit;
	padding: 0;
	font-size: inherit;
}
body.is-terminal-home .th-page-col-body blockquote {
	border-left: 3px solid var(--th-fg-amber);
	padding: 4px 0 4px 14px;
	margin: 14px 0;
	color: var(--th-fg-text) !important;
	font-style: italic;
}
body.is-terminal-home .th-page-col-body blockquote p {
	color: var(--th-fg-text) !important;
	font-style: italic;
}
body.is-terminal-home .th-page-col-body hr {
	border: 0;
	border-top: 1px solid rgba(255,255,255,0.22);
	margin: 24px 0;
}
body.is-terminal-home .th-page-col-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	font-size: 13.5px;
}
body.is-terminal-home .th-page-col-body th,
body.is-terminal-home .th-page-col-body td {
	border: 1px solid rgba(255,255,255,0.12);
	padding: 8px 10px;
	text-align: left;
}
body.is-terminal-home .th-page-col-body th {
	background: rgba(255,255,255,0.04);
	font-weight: 600;
	color: var(--th-fg-amber) !important;
}

/* Ghost editor "kg-*" cards (image, gallery, bookmark, embed, callout, button) */
body.is-terminal-home .th-page-col-body .kg-card,
body.is-terminal-home .th-page-col-body figure.kg-card {
	margin: 18px 0;
	max-width: 100%;
}
body.is-terminal-home .th-page-col-body .kg-image,
body.is-terminal-home .th-page-col-body .kg-image-card img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}
body.is-terminal-home .th-page-col-body .kg-width-wide,
body.is-terminal-home .th-page-col-body .kg-width-full {
	max-width: 100%;
}
body.is-terminal-home .th-page-col-body .kg-bookmark-card {
	display: flex;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 3px;
	overflow: hidden;
	margin: 14px 0;
	text-decoration: none !important;
	transition: background 0.15s ease;
}
body.is-terminal-home .th-page-col-body .kg-bookmark-card:hover {
	background: rgba(255,255,255,0.07);
}
body.is-terminal-home .th-page-col-body .kg-bookmark-content {
	padding: 14px 16px;
	flex: 1 1 auto;
	min-width: 0;
}
body.is-terminal-home .th-page-col-body .kg-bookmark-title {
	color: var(--th-fg-white) !important;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}
body.is-terminal-home .th-page-col-body .kg-bookmark-description {
	color: var(--th-fg-text-dim) !important;
	font-size: 12.5px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.is-terminal-home .th-page-col-body .kg-bookmark-thumbnail img {
	width: 140px;
	height: 100%;
	object-fit: cover;
}
body.is-terminal-home .th-page-col-body .kg-bookmark-metadata {
	color: var(--th-fg-text-dim) !important;
	font-size: 11px;
	margin-top: 6px;
}
body.is-terminal-home .th-page-col-body .kg-callout-card {
	background: rgba(252,168,46,0.08);
	border-left: 3px solid var(--th-fg-amber);
	padding: 14px 16px;
	margin: 14px 0;
	border-radius: 0 3px 3px 0;
}
body.is-terminal-home .th-page-col-body .kg-button-card {
	margin: 18px 0;
	text-align: center;
}
body.is-terminal-home .th-page-col-body .kg-btn,
body.is-terminal-home .th-page-col-body .kg-button-card a {
	display: inline-block;
	background: var(--th-fg-amber);
	color: #000 !important;
	padding: 10px 22px;
	border-radius: 3px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.15s ease;
}
body.is-terminal-home .th-page-col-body .kg-btn:hover,
body.is-terminal-home .th-page-col-body .kg-button-card a:hover {
	background: var(--th-fg-amber-bri, #ffb84d);
}
body.is-terminal-home .th-page-col-body .kg-embed-card iframe {
	max-width: 100%;
	width: 100%;
	border: 0;
}
body.is-terminal-home .th-page-col-body .kg-gallery-card,
body.is-terminal-home .th-page-col-body .kg-gallery-container {
	max-width: 100%;
}
body.is-terminal-home .th-page-col-fallback {
	background: rgba(255,180,0,0.06);
	border: 1px dashed rgba(255,180,0,0.4);
	border-radius: 4px;
	padding: 18px;
	color: var(--th-fg-text);
}
/* Stack columns on narrow viewports */
@media (max-width: 980px) {
	body.is-terminal-home .th-gallery.th-gallery-double {
		grid-template-columns: 1fr;
	}
}

body.is-terminal-home .th-card {
	background: var(--th-bg-card);
	display: flex;
	flex-direction: column;
	cursor: pointer;
	border: 1px solid transparent;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	contain: layout paint style;
	content-visibility: auto;
	contain-intrinsic-size: auto 380px;
	position: relative;
	transition: background 0.18s ease, border-color 0.18s ease;
}
body.is-terminal-home .th-card:hover {
	background: var(--th-bg-card-hi);
	border-color: rgba(255, 255, 255, 0.06);
}

body.is-terminal-home .th-card-image {
	aspect-ratio: 16/9;
	background-size: cover;
	background-position: center;
	background-color: #1a3556;
	transition: filter 0.20s ease;
}
body.is-terminal-home .th-card:hover .th-card-image {
	filter: brightness(1.05) saturate(1.05);
}
body.is-terminal-home .th-card-image-placeholder {
	background-color: #000;
	background-image: url('images/loading-logo.png');
	background-size: 55%;
	background-position: center center;
	background-repeat: no-repeat;
}

body.is-terminal-home .th-card-body {
	padding: 18px 16px 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

body.is-terminal-home .th-card-title {
	color: var(--th-fg-white);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 9px;
	letter-spacing: -0.005em;
	transition: color 0.18s ease;
}
body.is-terminal-home .th-card-title a,
body.is-terminal-home .th-card-title a:link,
body.is-terminal-home .th-card-title a:visited,
body.is-terminal-home .th-card-title a:hover {
	color: var(--th-fg-white) !important;
	text-decoration: none !important;
	transition: color 0.18s ease;
}
body.is-terminal-home .th-card:hover .th-card-title,
body.is-terminal-home .th-card:hover .th-card-title a {
	color: #ffffff !important;
}

body.is-terminal-home .th-card-desc {
	color: var(--th-fg-text);
	font-size: 12.5px;
	line-height: 1.5;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

body.is-terminal-home .th-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
	margin-bottom: 4px;
}
body.is-terminal-home button.th-card-tag {
	display: inline-flex;
	align-items: center;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: lowercase;
	color: var(--th-fg-text-dim) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	padding: 2px 0;
	cursor: pointer;
	margin: 0;
	box-shadow: none;
	transition: color 0.12s ease;
	line-height: 1.3;
}
body.is-terminal-home button.th-card-tag:hover {
	background: transparent !important;
	border: 0 !important;
	color: var(--th-fg-white) !important;
}
body.is-terminal-home button.th-card-tag:focus-visible {
	outline: 2px solid var(--th-fg-amber);
	outline-offset: 1px;
}

/* Filter banner — shown when user clicks a tag */
body.is-terminal-home .th-filter-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	margin-bottom: 12px;
	background: rgba(252,168,46,0.08);
	border-left: 3px solid var(--th-fg-amber);
	border-radius: 2px;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 13px;
	color: var(--th-fg-white);
	flex-wrap: wrap;
}
body.is-terminal-home .th-filter-banner[hidden] {
	display: none !important;
}
body.is-terminal-home .th-filter-banner-label {
	color: var(--th-fg-text-dim);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
body.is-terminal-home .th-filter-banner-tag {
	color: var(--th-fg-amber);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.02em;
}
body.is-terminal-home button.th-filter-banner-clear,
body.is-terminal-home a.th-filter-banner-clear,
body.is-terminal-home a.th-filter-banner-clear:link,
body.is-terminal-home a.th-filter-banner-clear:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.20);
	color: var(--th-fg-white) !important;
	border-radius: 2px;
	padding: 4px 10px;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	margin-left: auto;
	transition: background 0.12s ease, border-color 0.12s ease;
	line-height: 1;
	text-decoration: none !important;
}
body.is-terminal-home button.th-filter-banner-clear:hover,
body.is-terminal-home a.th-filter-banner-clear:hover {
	background: rgba(255,255,255,0.05);
	border-color: rgba(255,255,255,0.40);
	color: var(--th-fg-white) !important;
}
body.is-terminal-home button.th-filter-banner-clear svg,
body.is-terminal-home a.th-filter-banner-clear svg {
	flex: 0 0 auto;
}
body.is-terminal-home .th-filter-empty,
body.is-terminal-home .th-filter-loading {
	grid-column: 1 / -1;
	padding: 32px 16px;
	text-align: center;
	color: var(--th-fg-text-dim);
	font-size: 14px;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
}

body.is-terminal-home .th-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 16px;
	font-size: 12px;
	background: transparent;
}

/* Tags at the FAR LEFT — don't grow, just take their natural width.
   Date pushed to the FAR RIGHT via margin-left:auto on date.
   Single-row layout with overflow hidden if too many tags. */
body.is-terminal-home .th-card-foot .th-card-tags {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	min-width: 0;
	flex: 0 1 auto;       /* shrink ok, don't grow */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Author class kept for backward compatibility (server-rendered cache may
   still have author markup). Hidden when not in use — v69+ template has
   no author. */
body.is-terminal-home a.th-card-author,
body.is-terminal-home a.th-card-author:link,
body.is-terminal-home a.th-card-author:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 11px;
	background: #413F3F;
	color: var(--th-fg-white) !important;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	cursor: pointer;
	text-decoration: none !important;
	border: 1px solid #000000;
	border-radius: 2px;
}
body.is-terminal-home a.th-card-author:hover {
	background: #4d4b4b;
	color: var(--th-fg-white) !important;
}
body.is-terminal-home a.th-card-author > * {
	color: inherit !important;
}
/* Green status dot — was a square, now a circle */
body.is-terminal-home .th-card-author::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--th-fg-green);
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: 0 0 4px rgba(74,205,76,0.6);
}
body.is-terminal-home .th-card-date {
	color: var(--th-fg-text-dim) !important;
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	letter-spacing: 0.04em;
	font-weight: 400;
	flex: 0 0 auto;
	margin-left: auto;        /* push to far right edge */
	white-space: nowrap;
}

/* ============================================================
   8. POST VIEW — inline swap with the gallery (Content API rendered)
   ============================================================ */
body.is-terminal-home .th-post-view {
	background: var(--th-bg-base);
	color: var(--th-fg-text);
	padding: 0;
	min-height: 60vh;
}
.th-post-view[hidden] { display: none !important; }

body.is-terminal-home .th-post-view-body {
	padding: 24px 36px 60px;
	max-width: 800px;
	margin: 0 auto;
	position: relative;
}

/* ─── PAYWALL (inline, end-of-preview) ──────────────────────────────
   v59+: paywall is rendered inline at the end of the public preview
   content (not as a floating overlay). The preview is fully readable
   without blur — Ghost server already truncates the HTML at the
   "Public preview" divider for non-member viewers.
   v60+: styled as a Windows XP "Luna" notification window.
   v63+: fade-into-text overlay, full-width card (matches content),
         hide Ghost's native post-upgrade-cta to avoid double paywall. */

/* HIDE Ghost's native paywall (post-upgrade-cta / m-gate) — we use our
   own inline XP-styled paywall instead. Ghost's {{content}} helper auto-
   injects this on member-only posts; we render ours conditionally via
   {{#unless access}} block in post.hbs. Without this CSS, BOTH show.
   v107.18 Bug #53: expanded scope to body.page-terminal defensively.
   /terminal/ templates use {{{html}}} (not {{content}}) so the auto-
   inject path is theoretically unreachable, but a future template tweak
   could regress this — keep the rule as a belt-and-braces guard. */
body:is(.is-terminal-home, .page-terminal) .post-upgrade-cta,
body:is(.is-terminal-home, .page-terminal) aside.post-upgrade-cta,
body:is(.is-terminal-home, .page-terminal) .m-gate,
body:is(.is-terminal-home, .page-terminal) [class*="post-upgrade"] {
	display: none !important;
}

/* No content blur — content is the public preview, fully readable */
body.is-terminal-home .th-post-view.is-locked .th-post-view-content {
	/* clean — no filter, no pointer-events disable */
}

/* Floating paywall overlay disabled — kept hidden via [hidden] attr */
body:is(.is-terminal-home, .page-terminal) .th-paywall-overlay {
	display: none !important;
}

/* Inline paywall — full-width container at end of preview content */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline {
	position: relative;
	margin: 0 auto;
	padding: 60px 0 16px;
	width: 100%;
	max-width: none;
	clear: both;
}

/* Fade-out overlay extending UP into the post content. Creates a soft
   "the text is fading away" effect right before the paywall card.
   Opacity stops are aggressive (mostly opaque early) so the transition
   reads as "content is hidden, not just dimmed". */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-fade {
	position: absolute;
	top: -160px;
	left: -36px;
	right: -36px;
	height: 280px;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.30) 12%,
		rgba(0, 0, 0, 0.60) 25%,
		rgba(0, 0, 0, 0.85) 40%,
		rgba(0, 0, 0, 0.97) 55%,
		rgba(0, 0, 0, 1.00) 65%,
		rgba(0, 0, 0, 1.00) 100%);
	-webkit-mask-image: linear-gradient(180deg,
		transparent 0%, #000 35%, #000 100%);
	mask-image: linear-gradient(180deg,
		transparent 0%, #000 35%, #000 100%);
	/* Performance: contain paint (gradient is large but doesn't affect siblings) */
	contain: paint;
	/* v107.16 Bug #49: removed will-change: opacity. The element is static —
	   it never animates opacity (it's a permanent fade-overlay rendered when
	   the paywall mounts). Per MDN, will-change should only be set when an
	   animation is imminent; permanent will-change forces a compositing layer
	   for the lifetime of the element, wasting GPU memory and disabling some
	   browser optimizations (e.g. text rasterization on subpixel boundaries). */
}

/* The CTA "window" itself — Windows XP Luna notification style.
   v68: constrained width (520px max) + centered, more authentic Luna outer
   border (#0831D9 instead of #003C74), double white shine, bigger fonts.
   v74 (2026-05-09): unified XP styling with .th-bb-signup. Both panels
   now use identical body gradient + box-shadow stack for consistent XP
   feel. Subtle 4-stop gradient: top edge slightly lighter (catches light),
   bottom edge slightly darker (suggests panel volume) — without the
   heavy directional bevel that fought XP authenticity. */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: 0;
	background: linear-gradient(180deg,
		#F4F2E5 0%,
		#ECE9D8 3%,
		#ECE9D8 92%,
		#E5E1CF 97%,
		#DCD8C6 100%);
	border: 1px solid #0831D9;
	border-radius: 8px 8px 4px 4px;
	box-shadow:
		inset 0 0 0 1px #FFFFFF,
		inset 0 0 0 2px #DCE7F5,
		0 0 0 1px rgba(8, 49, 217, 0.10),
		0 6px 18px rgba(0, 30, 100, 0.35),
		0 2px 4px rgba(0, 0, 0, 0.20);
	overflow: hidden;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif !important;
	contain: layout paint style;
}

/* Title bar — authentic Luna 7-stop blue gradient + bottom shadow line */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card::before {
	content: '';
	display: block;
	width: 100%;
	height: 28px;
	background: linear-gradient(180deg,
		#0997FF 0%,
		#0064D7 4%,
		#005CD8 6%,
		#0855D4 8%,
		#0050A4 14%,
		#0050A4 56%,
		#005DC1 90%,
		#001F71 100%);
	border-bottom: 1px solid #001F71;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	border-radius: 6px 6px 0 0;
}

/* Title bar text — positioned absolutely over the gradient pseudo-element */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-icon {
	position: absolute;
	top: 6px;
	left: 9px;
	width: 16px;
	height: 16px;
	color: #FFE082;
	z-index: 2;
	pointer-events: none;
	margin: 0;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-title {
	position: absolute;
	top: 4px;
	left: 32px;
	right: 14px;
	height: 24px;
	line-height: 24px;
	margin: 0 !important;
	color: #FFFFFF !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.30);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 2;
	user-select: none;
}

/* Body of the window — CENTERED text, bigger font, more breathing room */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-text {
	margin: 22px 28px 16px !important;
	color: #1a1a1a !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	font-weight: 400;
	text-align: center;
	max-width: none !important;
}

/* Form — CENTERED, constrained width so input+button don't stretch wide */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-form {
	margin: 0 auto 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 380px;
	width: calc(100% - 56px);
}

body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-input-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
}

/* XP sunken textbox */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card input.th-paywall-input,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 24px;
	padding: 0 8px;
	background: #FFFFFF;
	border: 1px solid;
	/* XP sunken bevel: dark top/left, light bottom/right */
	border-color: #7F9DB9 #C5CDD3 #C5CDD3 #7F9DB9;
	border-radius: 0;
	color: #000000 !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	outline: none;
	/* XP "etched into page" depth: dark inset top-left + white inset bottom-right.
	   Matches the bb-signup form.th-email-input shadow pattern at L4339. The
	   previous single weak shadow (rgba 0.08) gave a flat impression — the
	   classic XP sunken textbox needs both inner edges to read as recessed. */
	box-shadow:
		inset 1px 1px 0 #404040,
		inset -1px -1px 0 #FFFFFF;
	width: auto !important;
	max-width: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
	box-sizing: border-box;
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card input.th-paywall-input::placeholder {
	color: #888888;
	font-style: italic;
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card input.th-paywall-input:focus {
	border-color: #0A66C2 #5C9CCC #5C9CCC #0A66C2;
	box-shadow:
		inset 1px 1px 0 #0A4682,
		inset -1px -1px 0 #B6D4F0,
		0 0 0 1px rgba(10, 102, 194, 0.30);
}

/* XP Luna beveled BLUE button — authentic Windows XP "Luna" start-button.
   v70: fixed orange hover bug (was #FBA73B amber → now lighter blue) +
   refined pearlescent shine + reflective top half + deeper saturation. */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn:link,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 26px;
	min-width: 100px;
	margin: 0;
	padding: 0 16px;
	/* Two-layer background:
	   1. Top reflective gloss (lighter highlight curve)
	   2. Main Luna blue gradient with reflective break at 50% */
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0.10) 47%,
			rgba(255, 255, 255, 0.0) 48%,
			rgba(0, 0, 0, 0.05) 100%),
		linear-gradient(180deg,
			#3B92E0 0%,
			#1B6AC0 50%,
			#0F4F92 100%) !important;
	color: #FFFFFF !important;
	border: 1px solid #003C74 !important;
	border-radius: 4px !important;
	font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
	flex: 0 0 auto;
	white-space: nowrap;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -1px 0 rgba(0, 0, 0, 0.20),
		0 1px 2px rgba(0, 0, 0, 0.25) !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
	text-decoration: none !important;
}
/* Span and label — always white text */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn > span,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn > span,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn .th-paywall-btn-label,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn .th-paywall-btn-label {
	color: #FFFFFF !important;
}

/* Hover — BLUE (was orange/amber bug). Brighter Luna with stronger shine. */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn:hover,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn:hover {
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.65) 0%,
			rgba(255, 255, 255, 0.15) 47%,
			rgba(255, 255, 255, 0.0) 48%,
			rgba(0, 0, 0, 0.05) 100%),
		linear-gradient(180deg,
			#65B5F2 0%,
			#2D89DD 50%,
			#1D6EBE 100%) !important;
	border-color: #003C74 !important;
	color: #FFFFFF !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(0, 0, 0, 0.20),
		0 1px 3px rgba(0, 0, 0, 0.30) !important;
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn:hover .th-paywall-btn-arrow,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn:hover .th-paywall-btn-arrow {
	transform: translateX(2px);
}

/* Active — pressed-in dark blue, no top reflection */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn:active,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn:active {
	background:
		linear-gradient(180deg,
			rgba(0, 0, 0, 0.05) 0%,
			rgba(0, 0, 0, 0.10) 100%),
		linear-gradient(180deg, #155DAB 0%, #0F4F92 100%) !important;
	box-shadow:
		inset 0 1px 3px rgba(0, 0, 0, 0.40) !important;
	transform: translateY(1px);
}

/* Focus — XP-style dotted inner outline */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn:focus,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn:focus-visible,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn:focus,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn:focus-visible {
	outline: 1px dotted rgba(255, 255, 255, 0.85) !important;
	outline-offset: -4px;
}

body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-btn-arrow {
	width: 12px;
	height: 12px;
	color: #FFFFFF !important;
	transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sign-in link (footer) */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-signin {
	margin: 0 auto 18px !important;
	color: #555555 !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	text-align: center;
	letter-spacing: 0;
	max-width: 380px;
	width: calc(100% - 56px);
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-signin a,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-signin a:link,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-signin a:visited {
	color: #0050A4 !important;
	text-decoration: underline !important;
	font-weight: 400 !important;
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-signin a:hover {
	color: #003C74 !important;
}

/* Alert (success/error) — centered, matches form width */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-form-alert {
	margin: 0 auto;
	max-width: 380px;
	width: calc(100% - 56px);
	display: block;
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-form-success,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-form-error {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 8px 10px;
	background: #FFFCE0;
	border: 1px solid #E8C100;
	border-radius: 3px;
	color: #4A3A00 !important;
	font-family: inherit !important;
	font-size: 11.5px !important;
	line-height: 1.4;
	text-align: left;
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-form-error {
	background: #FFE8E8;
	border-color: #D03030;
	color: #6A0000 !important;
}

@media (max-width: 540px) {
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline {
		padding-top: 40px;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-fade {
		left: -16px;
		right: -16px;
		top: -120px;
		height: 240px;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card {
		max-width: none;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-input-row {
		flex-direction: column;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn {
		margin-left: 0;
		margin-top: 6px;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-text {
		margin: 16px 16px 14px !important;
		font-size: 14px !important;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-form,
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-signin {
		margin-left: 16px;
		margin-right: 16px;
		max-width: none;
		width: auto;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-form-alert {
		margin: 0 16px;
		max-width: none;
		width: auto;
	}
}

/* When paywall is active, prevent the document from scrolling — visitors
   stay anchored to the paywall view. Internal post-view-body still scrolls
   if it has overflow, but the user can't navigate the rest of the site. */

/* v107.16 Bug #48: removed dead floating-paywall remnants from v67:
     - empty @media (max-width: 700px) block
     - @keyframes th-paywall-enter
     - @keyframes th-paywall-spin
     - stale comments referencing deleted glass-card layout
   Confirmed unused via grep across .css/.js/.hbs. Trims ~500 bytes total
   from the unminified CSS. */

@media (max-width: 480px) {
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-title { font-size: 13px !important; }
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card > .th-paywall-text { font-size: 12px !important; }
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card .th-paywall-input-row {
		flex-direction: column;
	}
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn {
		margin-left: 0;
		margin-top: 6px;
		width: 100%;
	}
}

/* v107.16 Bug #26 fix (rev2): bump input font-size to 16px on touch viewports
   to defeat iOS Safari's auto-zoom-on-focus behavior. iOS zooms in on any
   input with font-size < 16px (jarring UX: page resizes, keyboard appears,
   user must pinch back). The XP-styled paywall input is 12px on desktop for
   visual density; on touch we preserve the visual height (24px) but bump the
   text to 16px.
   v107.17 (rev2): originally scoped to (max-width: 480px) which missed iPhone
   landscape (e.g. iPhone 14 = 844px wide in landscape) — auto-zoom still
   triggered there. Switched to (hover: none) and (pointer: coarse) so it
   applies to ANY touch device regardless of viewport, while keeping desktop
   (non-touch) at the original 12px for visual density. */
@media (hover: none) and (pointer: coarse) {
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card input.th-paywall-input,
	body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card input[type="email"] {
		font-size: 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.is-terminal-home .th-card,
	body.is-terminal-home .th-card-image,
	body.is-terminal-home .th-card-title,
	body.is-terminal-home .th-card-title a {
		transition: none !important;
	}
	body.is-terminal-home .th-card:hover .th-card-image {
		filter: none;
	}
}

body.is-terminal-home .th-post-view-body h1,
body.is-terminal-home #th-post-view-title {
	color: var(--th-fg-white) !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	margin: 0 0 16px !important;
	letter-spacing: -0.01em !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
}

body.is-terminal-home .th-post-view-meta {
	color: var(--th-fg-text-dim);
	font-size: 14px;
	margin-bottom: 32px;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	align-items: baseline;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-bottom: 0;
	border-bottom: 0;
}
body.is-terminal-home .th-post-view-meta > span {
	color: var(--th-fg-text-dim) !important;
	font-size: 14px;
}
/* Author: gray, NORMAL case (not uppercase), no letter-spacing — reads as "de Ignacio Breijo" naturally */
body.is-terminal-home .th-post-view-meta .th-post-meta-author,
body.is-terminal-home .th-post-view-meta .th-post-meta-author span {
	color: #8a8a8a !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 15px;
	font-weight: 400;
}
/* Reading time: lowercase ("3 min lectura" instead of "3 MIN LECTURA"). Author
   is the only other span that overrides the parent's text-transform; the date
   stays uppercase for terminal aesthetic. */
body.is-terminal-home .th-post-view-meta .th-post-meta-reading {
	text-transform: none !important;
	letter-spacing: 0.02em !important;
}

body.is-terminal-home .th-post-view-content {
	color: #EEA020 !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
}
body.is-terminal-home .th-post-view-content > * {
	color: #EEA020 !important;
}
body.is-terminal-home .th-post-view-content p,
body.is-terminal-home .th-post-view-content li,
body.is-terminal-home .th-post-view-content span,
body.is-terminal-home .th-post-view-content div,
body.is-terminal-home .th-post-view-content strong,
body.is-terminal-home .th-post-view-content em,
body.is-terminal-home .th-post-view-content b,
body.is-terminal-home .th-post-view-content i {
	color: #EEA020 !important;
}
body.is-terminal-home .th-post-view-content h2,
body.is-terminal-home .th-post-view-content h3,
body.is-terminal-home .th-post-view-content h4,
body.is-terminal-home .th-post-view-content h5,
body.is-terminal-home .th-post-view-content h6 {
	color: var(--th-fg-white) !important;
	margin: 32px 0 14px !important;
	font-weight: 600 !important;
}
/* Headings may contain inline formatting (<span>, <strong>, <em>) — without
   this, the generic span/strong/em rule above would override the heading
   color back to amber. Match the heading's white color on those descendants. */
body.is-terminal-home .th-post-view-content h2 *,
body.is-terminal-home .th-post-view-content h3 *,
body.is-terminal-home .th-post-view-content h4 *,
body.is-terminal-home .th-post-view-content h5 *,
body.is-terminal-home .th-post-view-content h6 * {
	color: var(--th-fg-white) !important;
}
body.is-terminal-home .th-post-view-content h2 { font-size: 24px !important; }
body.is-terminal-home .th-post-view-content h3 { font-size: 20px !important; }
body.is-terminal-home .th-post-view-content h4 { font-size: 17px !important; }
body.is-terminal-home .th-post-view-content p { margin: 0 0 18px !important; }
body.is-terminal-home .th-post-view-content a,
body.is-terminal-home .th-post-view-content a:link,
body.is-terminal-home .th-post-view-content a:visited,
body.is-terminal-home .th-page-col-body a,
body.is-terminal-home .th-page-col-body a:link,
body.is-terminal-home .th-page-col-body a:visited,
body.is-terminal-home .post-content a,
body.is-terminal-home .post-content a:link,
body.is-terminal-home .post-content a:visited,
body.is-terminal-home .post-content-teaser a,
body.is-terminal-home .post-content-teaser a:link,
body.is-terminal-home .post-content-teaser a:visited {
	color: #53B2F5 !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(83, 178, 245, 0.55) !important;
	text-underline-offset: 2px;
}
/* Links may contain inline formatting (<strong>, <em>, <span>) — without
   this, the generic span/strong/em rules above would override the link
   color back to amber. Same defensive pattern as the heading rule. */
body.is-terminal-home .th-post-view-content a *,
body.is-terminal-home .th-page-col-body a *,
body.is-terminal-home .post-content a *,
body.is-terminal-home .post-content-teaser a * {
	color: #53B2F5 !important;
}
body.is-terminal-home .th-post-view-content a:hover,
body.is-terminal-home .th-post-view-content a:hover *,
body.is-terminal-home .th-page-col-body a:hover,
body.is-terminal-home .th-page-col-body a:hover *,
body.is-terminal-home .post-content a:hover,
body.is-terminal-home .post-content a:hover *,
body.is-terminal-home .post-content-teaser a:hover,
body.is-terminal-home .post-content-teaser a:hover * {
	color: #7DC4F8 !important;
	text-decoration-color: #7DC4F8 !important;
}
body.is-terminal-home .th-post-view-content img {
	max-width: 100%;
	height: auto;
	margin: 20px 0;
	border-radius: 0 !important;
}
body.is-terminal-home .th-post-view-content figure { margin: 28px 0; }
body.is-terminal-home .th-post-view-content figcaption {
	color: var(--th-fg-text-dim) !important;
	font-size: 13px;
	text-align: center;
	margin-top: 8px;
}
body.is-terminal-home .th-post-view-content blockquote {
	border-left: 3px solid var(--th-fg-amber);
	padding-left: 18px;
	margin: 24px 0;
	color: var(--th-fg-white) !important;
	font-style: italic;
}
body.is-terminal-home .th-post-view-content code {
	background: #1a1a1a;
	padding: 2px 6px;
	font-family: 'Iosevka Aile', ui-monospace, monospace;
	font-size: 0.92em;
	color: var(--th-fg-amber) !important;
	border-radius: 0 !important;
}
body.is-terminal-home .th-post-view-content pre {
	background: #0a0a0a;
	padding: 18px;
	overflow-x: auto;
	border: 1px solid var(--th-border-hi);
	margin: 24px 0;
	border-radius: 0 !important;
}
body.is-terminal-home .th-post-view-content pre code {
	background: transparent;
	padding: 0;
	color: var(--th-fg-text) !important;
}
body.is-terminal-home .th-post-view-content ul,
body.is-terminal-home .th-post-view-content ol {
	margin: 0 0 18px;
	padding-left: 28px;
}
body.is-terminal-home .th-post-view-content li { margin-bottom: 8px; }

body.is-terminal-home .th-post-loading {
	color: var(--th-fg-text-dim);
	text-align: center;
	padding: 80px 20px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	animation: th-post-loading-fadein 0.25s ease 0.2s forwards;
}
@keyframes th-post-loading-fadein {
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	body.is-terminal-home .th-post-loading {
		animation-duration: 0.001s;
	}
}
body.is-terminal-home .th-post-error {
	color: #FF3540;
	text-align: center;
	padding: 60px 20px;
}

body.is-terminal-home .th-post-paywall {
	padding: 28px;
	border: 1px solid var(--th-border-hi);
	margin-top: 40px;
	text-align: center;
	background: #1a1a1a;
}
body.is-terminal-home .th-post-paywall p {
	margin-bottom: 18px;
	color: var(--th-fg-text);
}
body.is-terminal-home a.th-post-paywall-btn {
	display: inline-block !important;
	padding: 12px 22px !important;
	background: #E5202E !important;
	color: #000 !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	text-decoration: none !important;
	font-size: 13px !important;
}
body.is-terminal-home a.th-post-paywall-btn:hover {
	background: #FF3540 !important;
	color: #000 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ─────────────────────────────────────────────────────────────────
   MOBILE (≤ 860px) — clean stacked presentation, no terminal chrome
   The terminal layout (tabs+sidebar+statusbar) is desktop-only.
   On mobile we hide all the chrome and present a clean, readable
   layout: logo + subscribe form + list of post cards. Tabs become
   a fixed bottom nav bar. Modeled on the original Mesa theme's
   mobile UX.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {

	/* Hide terminal chrome — tabs/subnav/status all desktop-only */
	body.is-terminal-home .th-subnav,
	body.is-terminal-home .th-status-line,
	body.is-terminal-home .th-page-margin-left {
		display: none !important;
	}

	/* Tabs become a horizontal scrollable bar at top — only the most
	   essential ones show. Hide the spacer + signin tab + legal links. */
	body.is-terminal-home .th-tabs {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		min-height: 44px;
		padding: 0;
	}
	body.is-terminal-home .th-tabs::-webkit-scrollbar { display: none; }
	body.is-terminal-home .th-tab-spacer,
	body.is-terminal-home .th-tab-legal {
		display: none !important;
	}
	body.is-terminal-home a.th-tab {
		flex: 0 0 auto;
		font-size: 11.5px !important;
		padding: 0 14px !important;
		min-height: 44px;
		min-width: auto;
	}
	body.is-terminal-home a.th-tab > span {
		font-size: 11.5px !important;
	}

	/* Top bar: simplified — only pill + back, no search button on mobile */
	body.is-terminal-home .th-top-bar {
		padding: 8px 12px !important;
		min-height: 40px;
	}
	body.is-terminal-home .th-tb-search {
		display: none !important;
	}
	body.is-terminal-home .th-tb-pill {
		font-size: 12px !important;
		/* Override desktop's fixed 380px width — on narrow viewports a fixed
		   pill would overflow or push the back button off-screen. */
		flex: 0 1 auto;
		width: auto;
		max-width: 60vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	body.is-terminal-home .th-tb-back {
		font-size: 11px !important;
		padding: 6px 10px !important;
	}

	/* Grid: single column, sidebar hidden by default */
	body.is-terminal-home .th-terminal {
		grid-template-columns: 1fr !important;
		display: block !important;
	}
	body.is-terminal-home .th-sidebar {
		display: none !important;
	}

	/* Gallery wrap: full width, modest padding.
	   v79 (2026-05-09): top padding 14px → 18px gives more breathing room
	   below the fixed mobile navbar in the common (anonymous) case where
	   brand-block follows. For logged-in members (no brand-block), the
	   `.is-member` rule below adds even more top space — gallery cards
	   shouldn't feel pegada to the navbar when they're the first content. */
	body.is-terminal-home .th-gallery-wrap {
		padding: 18px 14px 80px !important;
		overflow-y: visible !important;
	}
	body.is-terminal-home.is-member .th-gallery-wrap {
		padding-top: 30px !important;
	}
	/* Small consistent gap between gallery cards and whatever sits above
	   (mobile-links, filter-banner, brand-block padding-bottom, etc). */
	body.is-terminal-home .th-gallery {
		margin-top: 6px;
	}
	body.is-terminal-home.is-member .th-gallery {
		margin-top: 12px;
	}

	/* Brand block: desktop-style row layout (logo left + text right + signup below).
	   v75 (2026-05-09): mobile now mirrors desktop instead of centered stack —
	   user request. Logo on left, title above tagline on right, signup wraps
	   to a new row below at full width.
	   v77 (2026-05-09): increased top padding (18px → 32px) so brand-block
	   doesn't feel pegada to the fixed mobile navbar. Body already has
	   padding-top:52px to clear the navbar; this adds visual breathing room
	   between navbar bottom and brand-block content.
	   v83 (2026-05-09): border-bottom removed — user requested no horizontal
	   line separating brand-block and mobile-links below it.
	   v86 (2026-05-09): brand-block padding-top 32 → 48 (still pegado per
	   user). Combined with body padding-top: 130 (v86) + gallery-wrap 18 +
	   brand-block 48 = 196px breathing room from viewport top to logo. */
	body.is-terminal-home .th-brand-block {
		padding: 48px 16px 22px !important;
		text-align: left !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 14px !important;
		flex-wrap: wrap !important;
		border-bottom: 0 !important;
	}
	body.is-terminal-home .th-bb-logo {
		flex: 0 0 64px !important;
		width: 64px !important;
		max-width: 64px !important;
		height: 64px !important;
		margin: 0 !important;
		align-self: center !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}
	body.is-terminal-home .th-bb-logo img {
		width: 64px !important;
		height: 64px !important;
		max-width: 64px !important;
		display: block !important;
	}
	body.is-terminal-home .th-bb-text-stack {
		flex: 1 1 0 !important;
		min-width: 0;
		max-width: none !important;
		text-align: left !important;
		gap: 4px;
	}
	body.is-terminal-home a.th-bb-site {
		font-size: 18px !important;
		text-align: left !important;
	}
	body.is-terminal-home .th-bb-tagline {
		font-size: 13px !important;
		line-height: 1.5 !important;
		max-width: none !important;
		margin: 0 !important;
		text-align: left !important;
	}
	/* Signup wraps to its own row below, full width */
	body.is-terminal-home .th-bb-signup {
		flex: 0 0 100% !important;
		width: 100% !important;
		margin: 12px 0 0 !important;
		align-items: stretch !important;
	}
	body.is-terminal-home .th-signup-form {
		width: 100% !important;
		max-width: 380px;
		margin: 0 auto !important;
	}

	/* Cards: single column, COMPACT HORIZONTAL layout on mobile.
	   v76 (2026-05-09): user request — text-left + image-right, transparent
	   background (no card chrome), orange title+desc. Uses CSS grid with
	   named areas so DOM order (image, body, foot) maps to visual order
	   (body left, image right, foot below) without changing markup. */
	body.is-terminal-home .th-gallery {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}
	body.is-terminal-home .th-card {
		display: grid !important;
		grid-template-columns: 1fr 90px;
		grid-template-rows: auto auto;
		grid-template-areas:
			"body image"
			"foot foot";
		gap: 4px 12px;
		min-height: auto;
		padding: 14px 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(213, 164, 90, 0.12) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		contain-intrinsic-size: auto 130px;
	}
	body.is-terminal-home .th-card:hover {
		background: transparent !important;
		border-color: rgba(213, 164, 90, 0.20) !important;
	}
	/* Last card no border (cleaner end of list) */
	body.is-terminal-home .th-card:last-child {
		border-bottom: 0 !important;
	}

	/* Image goes RIGHT — fixed compact square */
	body.is-terminal-home .th-card-image {
		grid-area: image;
		width: 90px !important;
		height: 90px !important;
		min-height: 0 !important;
		border-radius: 4px;
		background-size: cover;
		background-position: center;
		align-self: start;
		flex: none !important;
		filter: none !important;
	}
	body.is-terminal-home .th-card:hover .th-card-image {
		filter: none !important;
	}
	/* Image placeholder when post has no feature_image */
	body.is-terminal-home .th-card-image-placeholder {
		background: rgba(213, 164, 90, 0.06);
		border: 1px dashed rgba(213, 164, 90, 0.18);
	}

	/* Body (title + description) goes LEFT — orange typography */
	body.is-terminal-home .th-card-body {
		grid-area: body;
		padding: 0 !important;
		min-width: 0;
	}
	body.is-terminal-home .th-card-title {
		font-size: 15px !important;
		line-height: 1.3 !important;
		font-weight: 600 !important;
		margin: 0 0 4px !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	body.is-terminal-home .th-card-title,
	body.is-terminal-home .th-card-title a,
	body.is-terminal-home .th-card-title a:link,
	body.is-terminal-home .th-card-title a:visited {
		color: #EEA020 !important;
		text-decoration: none !important;
	}
	body.is-terminal-home .th-card:hover .th-card-title,
	body.is-terminal-home .th-card:hover .th-card-title a {
		color: #E8B86F !important;
	}
	body.is-terminal-home .th-card-desc,
	body.is-terminal-home .th-card-excerpt {
		color: #EEA020 !important;
		font-size: 12.5px !important;
		line-height: 1.4 !important;
		margin: 0 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		opacity: 0.85;
	}

	/* Footer (tags + date) full width below */
	body.is-terminal-home .th-card-foot {
		grid-area: foot;
		padding: 0 !important;
		display: flex;
		flex-wrap: wrap;
		gap: 6px 8px;
		align-items: center;
		font-size: 10.5px;
		color: rgba(213, 164, 90, 0.55);
	}
	body.is-terminal-home .th-card-tags {
		gap: 4px !important;
	}
	body.is-terminal-home .th-card-tag {
		font-size: 9.5px !important;
		padding: 2px 6px !important;
		min-height: 22px !important;
	}
	body.is-terminal-home .th-card-date {
		font-size: 10.5px !important;
		color: rgba(213, 164, 90, 0.55) !important;
		margin-left: auto;
	}

	/* Filter banner: full width, larger touch target */
	body.is-terminal-home #th-filter-banner {
		padding: 10px 14px !important;
		font-size: 12.5px !important;
	}
	body.is-terminal-home #th-filter-banner-clear {
		min-width: 32px;
		min-height: 32px;
	}

	/* Post view: comfortable reading on small screens.
	   v77 (2026-05-09): top padding 16→32px to clear the fixed mobile navbar
	   visually. Body already has padding-top:52px reserving navbar height;
	   this adds breathing room between navbar bottom and post title.
	   v81 (2026-05-09): bumped to 48px — user reported still pegado al navbar.
	   v85 (2026-05-09): bumped to 64px — user STILL reported pegado. */
	body.is-terminal-home .th-post-view-body {
		padding: 64px 16px 60px !important;
		max-width: 720px;
		margin: 0 auto !important;
	}
	body.is-terminal-home .th-post-view-body h1,
	body.is-terminal-home #th-post-view-title {
		font-size: 24px !important;
		line-height: 1.25 !important;
		margin-bottom: 12px !important;
	}
	body.is-terminal-home .th-post-view-meta {
		font-size: 12px !important;
		flex-wrap: wrap;
		gap: 6px 12px !important;
		margin-bottom: 20px !important;
	}
	body.is-terminal-home .th-post-view-content {
		font-size: 16px !important;
		line-height: 1.65 !important;
	}
	body.is-terminal-home .th-post-view-content p {
		margin-bottom: 16px !important;
	}
	body.is-terminal-home .th-post-view-content img {
		max-width: 100%;
		height: auto;
		border-radius: 6px;
	}

	/* Paywall: full width, centered in viewport (no sidebar offset) */
	body:is(.is-terminal-home, .page-terminal) .th-paywall-input-row {
		flex-direction: column !important;
	}
	/* Touch targets: minimum 44px height for buttons */
	body.is-terminal-home button,
	body.is-terminal-home .th-nav-btn,
	body.is-terminal-home .th-card-tag {
		min-height: 36px;
	}
}

/* ─── Small phones (≤ 540px) ─── */
@media (max-width: 540px) {
	body.is-terminal-home .th-bb-logo { max-width: 200px !important; }
	body.is-terminal-home .th-bb-tagline { font-size: 13.5px !important; }

	body.is-terminal-home .th-gallery-wrap {
		padding: 10px 10px 80px !important;
	}
	body.is-terminal-home .th-card-title {
		font-size: 15px !important;
	}
	body.is-terminal-home .th-post-view-body h1,
	body.is-terminal-home #th-post-view-title {
		font-size: 21px !important;
	}
	body.is-terminal-home .th-post-view-content {
		font-size: 15.5px !important;
	}

	/* Tabs: smaller text on small screens */
	body.is-terminal-home a.th-tab {
		padding: 0 10px !important;
		font-size: 10.5px !important;
	}
	body.is-terminal-home a.th-tab > span { font-size: 10.5px !important; }
}

/* ─── Tiny phones (≤ 380px) ─── */
@media (max-width: 380px) {
	body.is-terminal-home .th-bb-logo { max-width: 180px !important; }
	body.is-terminal-home .th-brand-block {
		padding: 36px 12px 22px !important;
	}
	body.is-terminal-home .th-post-view-body {
		padding: 48px 12px 40px !important;
	}
}

/* Hide hover-only effects on touch devices (no :hover capability) */
@media (hover: none) and (pointer: coarse) {
	body.is-terminal-home .th-card:hover {
		transform: none !important;
	}
	body.is-terminal-home .th-side-row:hover {
		background: transparent !important;
	}
}

/* ============================================================
   ERROR PAGES (404, 500, etc.) — terminal layout
   ============================================================ */
body.is-terminal-home.is-error-page {
	/* v107.16 Bug #23 fix: 100dvh fallback to 100vh — see body rule above. */
	min-height: 100vh;
	min-height: 100dvh;
}
body.is-terminal-home .th-error-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 24px 120px;
	min-height: 60vh;
}
body.is-terminal-home .th-error-card {
	max-width: 480px;
	text-align: center;
	color: var(--th-fg-text);
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
}
body.is-terminal-home .th-error-code {
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	color: var(--th-fg-amber);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 24px;
	text-shadow: 0 0 30px rgba(252, 168, 46, 0.25);
}
body.is-terminal-home .th-error-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--th-fg-white);
	margin: 0 0 12px;
	text-transform: none;
	letter-spacing: 0;
}
body.is-terminal-home .th-error-message {
	font-size: 15px;
	line-height: 1.5;
	color: #b8b8b8;
	margin: 0 0 32px;
}
body.is-terminal-home .th-error-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
}
body.is-terminal-home a.th-error-btn,
body.is-terminal-home a.th-error-btn:link,
body.is-terminal-home a.th-error-btn:visited {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	background: var(--th-fg-amber);
	color: #1a1100 !important;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 2px;
	transition: filter 0.12s ease, transform 0.06s ease;
	font-family: inherit !important;
}
body.is-terminal-home a.th-error-btn:hover {
	filter: brightness(1.1);
	color: #1a1100 !important;
}

/* ============================================================
   PRINT STYLES (added 2026-05-09)
   Hide all terminal chrome (tabs, subnav, top-bar) when printing
   posts so the article content prints cleanly without UI cruft.
   The quote, button row, and search/back navigation are not
   relevant on paper; readers want article text + images.
   ============================================================ */
@media print {
	body.is-terminal-home .th-tabs,
	body.is-terminal-home .th-subnav,
	body.is-terminal-home .th-top-bar,
	body.is-terminal-home .th-page-margin-left,
	body.is-terminal-home .th-page-margin-right {
		display: none !important;
	}
	body.is-terminal-home {
		background: #fff !important;
		color: #000 !important;
	}
	body.is-terminal-home .th-post-view-content,
	body.is-terminal-home .th-post-view-content p,
	body.is-terminal-home .th-post-view-content li {
		color: #000 !important;
	}
}

/* ============================================================
   IMAGE LIGHTBOX (added 2026-05-09)
   Click any image inside .th-post-view-content to expand to a
   full-viewport overlay. Click overlay (or press Esc) to close.
   ============================================================ */
body.is-terminal-home .th-post-view-content img {
	cursor: zoom-in;
}
.th-img-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	cursor: zoom-out;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.th-img-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}
.th-img-lightbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
	user-select: none;
	-webkit-user-select: none;
}
@media (max-width: 600px) {
	.th-img-lightbox {
		padding: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.th-img-lightbox {
		transition: none;
	}
}

/* ============================================================
   EXTERNAL SUCCESS MESSAGES (added 2026-05-09)
   Plain-text confirmation messages shown after form submission.
   Color #A7E488 (signal green). NOT inside a card/box — just text
   so the form layout doesn't shift on submit (no window expansion).
   ============================================================ */

/* Paywall card — external message appears BELOW the card */
/* Paywall success external message — appears below the .th-paywall-inline-card
   after form submit. Must override .th-post-view-content p color (which is the
   reading orange #D5A45A); we use a more specific selector matching the same
   2-class+1-element specificity then place AFTER in the cascade so it wins.
   v81 (2026-05-09): bumped specificity AND visual margin from card.
   - Specificity: now (0,0,3,1) via .th-paywall-inline ancestor → beats
     .th-post-view-content p (0,0,2,2)
   - Margin: 24px top (was 16px) → clearer separation from card
   - Centered: text-align:center + margin: auto on horizontal */
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline .th-paywall-success-external,
body:is(.is-terminal-home, .page-terminal) .th-paywall-success-external {
	display: block !important;
	color: #A7E488 !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	letter-spacing: 0.01em !important;
	text-align: center !important;
	max-width: 520px !important;
	margin: 24px auto 0 !important;
	padding: 0 16px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline .th-paywall-success-external[hidden],
body:is(.is-terminal-home, .page-terminal) .th-paywall-success-external[hidden] {
	display: none !important;
}

/* Brand-block signup confirmation — sibling of .th-bb-signup, NOT inside it.
   This ensures bb-signup stays the exact same size when user submits — only
   the parent brand-block grows to accommodate this plain-text line.
   v85 (2026-05-09):
   - DESKTOP: msg sits IMMEDIATELY to the LEFT of bb-signup card (right-aligned
     text reading toward the card). Uses margin-left:auto to push itself to
     the right edge; adjacent-sibling rule strips bb-signup's margin so they
     touch. Compact max-width 220px — doesn't eat horizontal space.
   - MOBILE: msg renders BELOW bb-signup (NOT above) via flex order property.
     bb-signup gets order:1, msg order:2 → bb-signup renders first in the
     flex flow, msg after. Both flex 0 0 100% (own row each). */
body.is-terminal-home .th-bb-signup-success-msg {
	color: #A7E488 !important;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.01em;
	text-align: right;             /* desktop: aligned right, hugging card edge */
	margin: 0 8px 0 auto !important;  /* margin-left:auto pushes to right next to card */
	padding: 0;
	flex: 0 0 auto;
	max-width: 220px;              /* compact — doesn't waste horizontal space */
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none;
	align-self: center;
}
body.is-terminal-home .th-bb-signup-success-msg[hidden] {
	display: none !important;
}
/* When msg is visible, bb-signup loses its margin-left:auto so msg+card
   form a tight pair on the right. Adjacent-sibling matches when msg directly
   precedes bb-signup in DOM. */
body.is-terminal-home .th-bb-signup-success-msg:not([hidden]) + .th-bb-signup {
	margin-left: 0 !important;
}
/* Mobile: msg goes BELOW bb-signup (not above). Flex order property flips
   visual order without changing DOM. bb-signup gets order:1 (renders earlier),
   msg gets order:2 (renders later, i.e., below). Both wrap to own rows. */
@media (max-width: 720px) {
	body.is-terminal-home .th-bb-signup {
		order: 1;
	}
	body.is-terminal-home .th-bb-signup-success-msg {
		order: 2;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin: 12px 0 0 0 !important;  /* small top gap, no horizontal */
		text-align: left !important;
		align-self: flex-start !important;
	}
	body.is-terminal-home .th-bb-signup-success-msg:not([hidden]) + .th-bb-signup {
		margin-left: 0 !important;
		margin-top: 12px !important;
	}
}

/* ============================================================
   MOBILE LAYOUT (≤720px) — additional overrides (v75 2026-05-09)
   - Hide top-bar (red strip with pill+search) entirely
   - Hide tabs nav (terminal/terminal/recursos tabs)
   - Hide red "ACCEDE AL CONTENIDO" CTA in subnav
   - Show contact links below bb-signup in #53B2F5
   - Brand-block uses desktop-style row layout (logo+text+signup)
   ============================================================ */

/* Desktop: hide the mobile-only contact links container.
   It's only meaningful when nav tabs are hidden. */
body.is-terminal-home .th-bb-mobile-links {
	display: none;
}

@media (max-width: 720px) {
	/* Top bar (red strip with pill+search+back) — hidden on mobile.
	   The pill+search live elsewhere or are accessed via Ghost search. */
	body.is-terminal-home .th-top-bar {
		display: none !important;
	}
	/* Tabs nav (ignaciobreijo.com / TERMINAL / ORDERFLOW / RECURSOS / etc).
	   Replaced by simpler mobile UX: brand-block + signup + contact links. */
	body.is-terminal-home .th-tabs {
		display: none !important;
	}
	/* Subnav buttons (X.com / Bolsa / Contacto / red CTA) — hidden on mobile.
	   These are now shown in .th-bb-mobile-links below the bb-signup form.
	   The .th-subnav container itself stays visible to host the daily quote
	   (.th-sl-quote) which is independent. */
	body.is-terminal-home .th-subnav .th-nav-btn,
	body.is-terminal-home .th-subnav a.th-nav-btn {
		display: none !important;
	}

	/* Mobile-only contact links — visible on mobile REGARDLESS of member
	   status (sibling of .th-brand-block, not inside its conditional).
	   v80 (2026-05-09): same green/black appearance as desktop .th-nav-btn
	   but COMPACT for mobile (smaller height + padding + font). Horizontal
	   flex with wrap — links sit side-by-side and wrap naturally.
	   v85 (2026-05-09): hidden on post-view (body.th-postview-open). Mobile-
	   links should only appear on home/gallery/tag pages where they make
	   sense as quick contact buttons; on post pages they distract. */
	body.is-terminal-home .th-bb-mobile-links {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 6px;
		margin: 0;
		padding: 16px 14px 18px;
		background: transparent;
		border-top: 0;
	}
	body.is-terminal-home.th-postview-open .th-bb-mobile-links {
		display: none !important;
	}
	/* When .th-brand-block is the immediate preceding sibling (anonymous user),
	   tighten the top spacing. v83 (2026-05-09): user requested REMOVE the
	   horizontal divider line — both brand-block's border-bottom and our
	   border-top are now zero on mobile. The spacing alone handles visual
	   separation. CSS adjacent-sibling selector (+) only matches when
	   brand-block actually exists in DOM — handles {{#unless @member}}. */
	body.is-terminal-home .th-brand-block + .th-bb-mobile-links {
		padding-top: 14px;
		border-top: 0;
	}
	/* Buttons: green bg + black text — matches desktop .th-nav-btn but compact */
	body.is-terminal-home .th-bb-mobile-links a,
	body.is-terminal-home .th-bb-mobile-links a:link,
	body.is-terminal-home .th-bb-mobile-links a:visited {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		padding: 0 10px;
		background: #58B94E !important;
		color: #000 !important;
		font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif;
		font-size: 10.5px !important;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none !important;
		border-radius: 2px;
		flex: 0 0 auto;
		white-space: nowrap;
		min-height: 28px;
		line-height: 1;
		transition: background 0.12s ease;
	}
	body.is-terminal-home .th-bb-mobile-links a:hover,
	body.is-terminal-home .th-bb-mobile-links a:active {
		background: #6BCC60 !important;
		color: #000 !important;
		text-decoration: none !important;
	}
}

/* ============================================================
   MOBILE NAVBAR (≤720px) — added 2026-05-09
   - Fixed top bar with hamburger + brand title + Subscribirse CTA
   - Glass panel slides in from left on hamburger tap
   - Hide-on-scroll-down, show-on-scroll-up via .is-hidden class
   - Body padding-top reserves nav space (prevents content jump)
   ============================================================ */

/* Desktop: hide everything mobile-nav related */
.th-mobile-nav,
.th-mn-panel,
.th-mn-backdrop {
	display: none;
}

@media (max-width: 720px) {
	body.is-terminal-home {
		/* 52px navbar + 78px breathing room (v86, was 58 in v85, 36 in v84).
		   env(safe-area-inset-top) handles iOS notched devices — without it,
		   the navbar (top:0) sits UNDER the notch on iPhones, eating ~44px
		   of visual space. The calc() adds back that lost room. On non-
		   notched browsers, env(safe-area-inset-top) returns 0 → 130px. */
		padding-top: calc(130px + env(safe-area-inset-top));
	}
	body.is-terminal-home .th-mobile-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* Height includes safe-area-inset-top — on notched iPhones the
		   navbar extends behind the notch and its content (hamburger, title,
		   CTA) is pushed down via padding-top:env(...) so it sits below the
		   notch. v85 (2026-05-09): added safe-area handling. */
		height: calc(52px + env(safe-area-inset-top));
		padding-top: env(safe-area-inset-top);
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 0;
		display: flex;
		align-items: center;
		gap: 8px;
		z-index: 9000;
		/* Frosted crystal glass — fully TRANSPARENT background + heavy blur.
		   The backdrop-filter alone creates the frost effect, no rgba tint
		   needed. Text+icons in white are visible against the blurred page
		   content thanks to the saturation+blur smoothing the contrast.
		   v78 (2026-05-09): user requested transparent fondo + frosted. */
		background: transparent;
		-webkit-backdrop-filter: saturate(180%) blur(30px);
		backdrop-filter: saturate(180%) blur(30px);
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.06),
			0 4px 24px rgba(0, 0, 0, 0.30);
		transform: translateY(0);
		transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
		will-change: transform;
		font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif;
	}
	body.is-terminal-home .th-mobile-nav.is-hidden {
		transform: translateY(-100%);
	}

	/* Hamburger button — three-line icon, animates to X when panel open.
	   v107.16 Bug #24 fix: bumped width/height from 38px to 44px to meet
	   Apple HIG minimum tap target (44x44pt). Below 44px, missed-taps
	   are common on mobile per Apple's accessibility guidelines. The
	   internal icon (3 lines, ~14px wide) stays the same visual size —
	   the extra padding around it just makes a more forgiving touch
	   surface. The 6px border-radius and visual centering of the icon
	   keep the navbar appearance unchanged at first glance. */
	body.is-terminal-home .th-mn-hamburger {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
		border-radius: 6px;
		transition: background 0.15s ease;
	}
	body.is-terminal-home .th-mn-hamburger:hover,
	body.is-terminal-home .th-mn-hamburger:active {
		background: rgba(255, 255, 255, 0.08);
	}
	body.is-terminal-home .th-mn-bar {
		display: block;
		width: 20px;
		height: 2px;
		background: #ffffff;
		border-radius: 1px;
		transform-origin: 50% 50%;
		transition:
			transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
			opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
			background 0.18s ease,
			height 0.22s ease,
			width 0.22s ease,
			box-shadow 0.22s ease;
	}
	/* X state — top + bottom bars rotate 45°/-45°, middle fades out.
	   v95 (2026-05-09): bars get noticeably thicker + wider when in X state
	   so the close icon is unambiguous. Added subtle glow (box-shadow) for
	   extra prominence on dark backgrounds. */
	body.is-terminal-home .th-mn-hamburger[aria-expanded="true"] .th-mn-bar {
		height: 3px;
		width: 24px;
		box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
	}
	body.is-terminal-home .th-mn-hamburger[aria-expanded="true"] .th-mn-bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	body.is-terminal-home .th-mn-hamburger[aria-expanded="true"] .th-mn-bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0.4);
	}
	body.is-terminal-home .th-mn-hamburger[aria-expanded="true"] .th-mn-bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	/* v95 — when panel is open, hamburger button gets faint pulse-like
	   highlight so user notices it's the close button now. */
	body.is-terminal-home .th-mn-hamburger[aria-expanded="true"] {
		background: rgba(255, 255, 255, 0.10);
	}

	/* Brand title — visible RIGHT of hamburger, IGNACIOBREIJO.COM uppercase.
	   v85 (2026-05-09): un-hidden + uppercase per user request. */
	body.is-terminal-home a.th-mn-title,
	body.is-terminal-home a.th-mn-title:link,
	body.is-terminal-home a.th-mn-title:visited {
		display: inline-flex !important;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		font-weight: 700;
		color: #ffffff !important;
		text-decoration: none !important;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Subscribirse CTA — silver/white XP Luna button with BLACK text.
	   v78 (2026-05-09): user requested white-silver fill, black text. */
	body.is-terminal-home a.th-mn-cta,
	body.is-terminal-home a.th-mn-cta:link,
	body.is-terminal-home a.th-mn-cta:visited {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 32px;
		padding: 0 14px;
		font-family: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-decoration: none !important;
		text-transform: uppercase;
		color: #000000 !important;
		/* Two-layer XP gloss: top sheen + silver gradient body */
		background:
			linear-gradient(180deg,
				rgba(255, 255, 255, 0.65) 0%,
				rgba(255, 255, 255, 0.20) 47%,
				rgba(255, 255, 255, 0.0) 48%,
				rgba(0, 0, 0, 0.05) 100%),
			linear-gradient(180deg,
				#FFFFFF 0%,
				#F0F0F0 50%,
				#CFCFCF 100%);
		border: 1px solid #999999;
		border-radius: 4px;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.85),
			inset 0 -1px 0 rgba(0, 0, 0, 0.12),
			0 1px 2px rgba(0, 0, 0, 0.25);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
		white-space: nowrap;
		transition: filter 0.12s ease, transform 0.06s ease;
	}
	body.is-terminal-home a.th-mn-cta:hover,
	body.is-terminal-home a.th-mn-cta:active {
		filter: brightness(1.05);
		color: #000000 !important;
	}
	body.is-terminal-home a.th-mn-cta:active {
		transform: translateY(1px);
	}

	/* User icon — white SVG, sits to the RIGHT of the Subscribirse CTA */
	body.is-terminal-home a.th-mn-user,
	body.is-terminal-home a.th-mn-user:link,
	body.is-terminal-home a.th-mn-user:visited {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		color: #FFFFFF !important;
		text-decoration: none !important;
		border-radius: 6px;
		background: transparent;
		transition: background 0.15s ease;
	}
	body.is-terminal-home a.th-mn-user:hover,
	body.is-terminal-home a.th-mn-user:active {
		background: rgba(255, 255, 255, 0.10);
	}
	body.is-terminal-home a.th-mn-user svg {
		display: block;
		stroke: #FFFFFF;
	}

	/* ─── Glass panel — frosted crystal, FULLY transparent (only blur) ─── */
	body.is-terminal-home .th-mn-panel {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 84vw;
		max-width: 320px;
		z-index: 9100;
		/* v95 (2026-05-09): MORE crystal per user request — stronger blur
		   (60px from 40), higher saturation (200% from 180), reduced inset
		   highlights so panel feels truly like floating frosted glass.
		   Background stays transparent — only blur creates the frost. */
		background: transparent;
		-webkit-backdrop-filter: saturate(200%) blur(60px);
		backdrop-filter: saturate(200%) blur(60px);
		border-right: 1px solid rgba(255, 255, 255, 0.06);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.06),
			inset 1px 0 0 rgba(255, 255, 255, 0.03),
			6px 0 28px rgba(0, 0, 0, 0.30);
		transform: translateX(-100%);
		transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		will-change: transform;
		visibility: hidden;
	}
	body.is-terminal-home .th-mn-panel.is-open {
		transform: translateX(0);
		visibility: visible;
	}
	/* Subtle specular highlight strip along left edge (crystal facet feel) */
	body.is-terminal-home .th-mn-panel::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 1px;
		background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.18) 0%,
			rgba(255, 255, 255, 0.04) 30%,
			rgba(255, 255, 255, 0.0) 70%);
		pointer-events: none;
	}
	body.is-terminal-home .th-mn-panel-inner {
		padding: 56px 20px 28px;
		display: flex;
		flex-direction: column;
		gap: 0;
		min-height: 100%;
	}
	body.is-terminal-home a.th-mn-link,
	body.is-terminal-home a.th-mn-link:link,
	body.is-terminal-home a.th-mn-link:visited {
		display: flex;
		align-items: center;
		min-height: 36px;
		padding: 4px 4px;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.01em;
		color: rgba(255, 255, 255, 0.92) !important;
		text-decoration: none !important;
		border-radius: 6px;
		transition: background 0.12s ease, color 0.12s ease;
		/* v94 (2026-05-09): defensive overflow handling — long member
		   emails (50+ chars) or future long labels won't push panel wider
		   than its 84vw cap. Truncate with ellipsis. */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}
	body.is-terminal-home a.th-mn-link:hover,
	body.is-terminal-home a.th-mn-link:active {
		background: rgba(255, 255, 255, 0.06);
		color: #ffffff !important;
	}
	/* v94 (2026-05-09): active page indicator. Subtle bg + bright text +
	   left accent bar so the user can tell which section they're on. */
	body.is-terminal-home a.th-mn-link.th-mn-link-active {
		background: rgba(255, 255, 255, 0.05);
		color: #ffffff !important;
		position: relative;
	}
	body.is-terminal-home a.th-mn-link.th-mn-link-active::before {
		content: '';
		position: absolute;
		left: -8px;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 18px;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1px;
	}
	/* v95 (2026-05-09): tighter group spacing per user request — items
	   even closer together. Was 18px in v93. */
	body.is-terminal-home a.th-mn-link.th-mn-link-group {
		margin-top: 14px;
	}
	body.is-terminal-home a.th-mn-link.th-mn-link-secondary,
	body.is-terminal-home a.th-mn-link.th-mn-link-secondary:link,
	body.is-terminal-home a.th-mn-link.th-mn-link-secondary:visited {
		font-size: 13px;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.55) !important;
		min-height: 30px;
		padding: 3px 4px;
	}
	/* v93 (2026-05-09): Footer pinned to bottom of panel via flex auto-margin.
	   Terms + privacy links sit at the bottom regardless of menu length. */
	body.is-terminal-home .th-mn-footer {
		margin-top: auto;
		padding-top: 24px;
		display: flex;
		flex-direction: column;
		gap: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}
	body.is-terminal-home .th-mn-divider {
		height: 1px;
		background: rgba(255, 255, 255, 0.08);
		margin: 14px 0;
	}

	/* Backdrop dimmer behind the panel — taps dismiss the panel */
	body.is-terminal-home .th-mn-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9050;
		background: rgba(0, 0, 0, 0);
		pointer-events: none;
		transition: background 0.28s ease;
	}
	body.is-terminal-home .th-mn-backdrop.is-open {
		background: rgba(0, 0, 0, 0.45);
		pointer-events: auto;
	}

	/* Body scroll-lock when panel is open */
	body.is-terminal-home.th-mn-locked {
		overflow: hidden;
	}

	/* Reduced motion — skip the slide animation, just fade visibility */
	@media (prefers-reduced-motion: reduce) {
		body.is-terminal-home .th-mobile-nav,
		body.is-terminal-home .th-mn-panel,
		body.is-terminal-home .th-mn-backdrop {
			transition-duration: 0.001s !important;
		}
	}
}

/* ============================================================
   v107.16 Bug #22 fix — IN-APP BROWSER NAVBAR OVERRIDE.
   Twitter/X, Instagram, Facebook, LinkedIn, TikTok, etc. on iOS show
   their own chrome bar above the document. They report
   env(safe-area-inset-top) ≈ 47px (the device notch value) but the
   notch is already covered by the in-app chrome — adding 47px to our
   navbar height makes it visually oversized ("más extendido" per user
   report from X mobile). Detection in theme-head-script.hbs adds
   .is-in-app to <html>; here we strip the safe-area additions on those
   browsers, falling back to the non-notched 130px / 52px values.
   Specificity needs `html.is-in-app body.is-terminal-home` (0,0,2,1+1)
   to outrank the @media plain `body.is-terminal-home` (0,0,1,1) inside
   the same media query — without the html prefix, the existing rule
   wins because of source order tiebreak.
   ============================================================ */
@media (max-width: 720px) {
	html.is-in-app body.is-terminal-home {
		padding-top: 130px;
	}
	html.is-in-app body.is-terminal-home .th-mobile-nav {
		height: 52px;
		padding-top: 0;
	}
}

/* ============================================================
   FEATURE IMAGE — Ghost post.feature_image hero (added 2026-05-09)
   Renders above content body in both server-rendered post.hbs AND
   SPA-injected renderPost. Uses figure + img + optional figcaption.
   ============================================================ */
body.is-terminal-home .th-post-feature-image {
	margin: 0 0 24px;
	padding: 0;
	width: 100%;
	background: transparent;
	border-radius: 4px;
	overflow: hidden;
}
body.is-terminal-home .th-post-feature-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: 4px;
}
body.is-terminal-home .th-post-feature-image figcaption {
	margin-top: 8px;
	padding: 0 4px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--th-fg-text-dim);
	font-style: italic;
	font-family: 'Iosevka Aile', ui-sans-serif, system-ui, sans-serif;
}
@media (max-width: 720px) {
	body.is-terminal-home .th-post-feature-image {
		margin: 0 0 18px;
		border-radius: 6px;
	}
	body.is-terminal-home .th-post-feature-image img {
		max-height: 280px;
		border-radius: 6px;
	}
	body.is-terminal-home .th-post-feature-image figcaption {
		font-size: 11.5px;
		margin-top: 6px;
	}
}

/* ============================================================
   BB-SIGNUP MOBILE FIX (added 2026-05-09)
   Form was looking poor on narrow viewports — input + button alignment
   was inconsistent, max-width caps were tightening the layout. Below
   we expand the signup card to full available width on mobile and
   ensure the input fills the remaining space next to the button.
   ============================================================ */
@media (max-width: 720px) {
	/* The XP signup card spans the full bb-signup column on mobile */
	body.is-terminal-home .th-bb-signup {
		max-width: 100% !important;
		margin: 12px 0 0 !important;
	}
	body.is-terminal-home .th-bb-signup .th-signup-row {
		padding: 10px 12px !important;
	}
	/* Form layout — flex row, input fills, button compact */
	body.is-terminal-home .th-bb-signup .th-signup-form {
		display: flex !important;
		flex-direction: row !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		gap: 0 !important;
	}
	/* The <form> wrapper holding input — flex 1 to fill */
	body.is-terminal-home .th-bb-signup .th-signup-form > form.th-email-input {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		height: 28px !important;
	}
	/* Input itself — full width within form wrapper.
	   v107.16 Bug #33 fix: previously had font-size: 16px inside this
	   @media (max-width: 720px) block to prevent iOS auto-zoom on focus.
	   That width-based query missed iPhone landscape (e.g. iPhone 14 Pro
	   = 852px landscape) where the input would still trigger pinch-zoom.
	   Width override stays here (it's correct for ≤720px), but the
	   anti-zoom 16px font-size is now hoisted to a separate
	   (hover: none) and (pointer: coarse) block below this @media so it
	   applies to ALL touch viewports regardless of width. */
	body.is-terminal-home .th-bb-signup .th-signup-form > form.th-email-input > input[type="email"] {
		width: 100% !important;
		min-width: 0 !important;
		height: 100% !important;
	}
	/* Submit button — compact, no shrink.
	   v107.16 Bug #21 fix: original selector `.th-bb-signup .th-signup-btn`
	   has specificity (0,0,3,1) but the desktop default at L4397 uses
	   `.th-signup-form > button.th-signup-btn` (0,0,3,2) which beats it
	   even with `!important` (specificity tiebreaks important rules). Mirror
	   the desktop selector shape AND keep the original to cover both shapes
	   so the override actually applies. Also explicitly bump padding-x and
	   gap so the icon+label fit properly at the new 28px height (the 24px
	   default looked cramped next to the 28px input row above; the icon
	   was visually misaligned because of the height mismatch). */
	body.is-terminal-home .th-bb-signup .th-signup-form > button.th-signup-btn,
	body.is-terminal-home .th-bb-signup button.th-signup-btn,
	body.is-terminal-home .th-bb-signup .th-signup-btn {
		flex: 0 0 auto !important;
		height: 28px !important;
		min-height: 28px !important;
		padding: 0 14px !important;
		font-size: 11px !important;
		gap: 6px !important;
		align-self: stretch !important;
	}
	/* Title bar (label "ACCEDE AL CONTENIDO") — slightly smaller on mobile */
	body.is-terminal-home .th-bb-signup .th-signup-label {
		font-size: 10.5px !important;
		min-height: 22px !important;
		padding: 5px 12px 5px 24px !important;
	}
	body.is-terminal-home .th-bb-signup .th-signup-label::before {
		width: 12px;
		height: 12px;
		left: 6px;
	}
}

/* v107.16 Bug #33 fix: th-bb-signup input font-size 16px on touch devices
   (regardless of viewport width) to prevent iOS Safari auto-zoom on focus.
   See Bug #26 / #27 / #33 for the full pattern. Hoisted out of the
   @media (max-width: 720px) block above because iPhone landscape exceeds
   720px and would otherwise still pinch-zoom. */
@media (hover: none) and (pointer: coarse) {
	body.is-terminal-home .th-bb-signup .th-signup-form > form.th-email-input > input[type="email"],
	body.is-terminal-home .th-bb-signup input#th-signup-email {
		font-size: 16px !important;
	}
}

/* ============================================================
   SUCCESS STATE — Submit buttons turn green + show ✓ REGISTRADO
   v82 (2026-05-09): user request — visual confirmation when the
   form is submitted. Both .th-signup-btn (bb-signup) and
   .th-paywall-btn (inline paywall) get the same green XP-Luna
   styling on .is-success.
   v83 (2026-05-09): bumped specificity — existing button rules use
   `.th-signup-form > button.th-signup-btn` (0,0,3,2) and
   `.th-paywall-inline-card button.th-paywall-btn` (0,0,3,2), which
   beat a flat `.th-signup-btn.is-success` (0,0,3,1). Now we mirror
   the same selector chain + .is-success to push to (0,0,4,2) for
   bb-signup and (0,0,4,2) for paywall — guaranteed to win.
   ============================================================ */
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success,
body.is-terminal-home button.th-signup-btn.is-success,
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success:hover,
body.is-terminal-home button.th-signup-btn.is-success:hover,
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success:focus,
body.is-terminal-home button.th-signup-btn.is-success:focus,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn.is-success,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success:hover,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn.is-success:hover,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success:focus,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn.is-success:focus {
	/* XP Luna green: same gradient pattern as the contact buttons (#58B94E)
	   but with the silver-button bevel structure for visual consistency. */
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.50) 0%,
			rgba(255, 255, 255, 0.15) 47%,
			rgba(255, 255, 255, 0.0) 48%,
			rgba(0, 0, 0, 0.05) 100%),
		linear-gradient(180deg,
			#74D466 0%,
			#58B94E 50%,
			#3A8232 100%) !important;
	border: 1px solid #2A5F23 !important;
	color: #000000 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 1px 2px rgba(0, 0, 0, 0.20) !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40) !important;
	cursor: default !important;
	filter: none !important;
}
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success > span,
body.is-terminal-home button.th-signup-btn.is-success > span,
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success > svg,
body.is-terminal-home button.th-signup-btn.is-success > svg,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success > span,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success .th-paywall-btn-label {
	color: #000000 !important;
}
/* Hide arrow icon when success — both bb-signup btn-icon and paywall btn-arrow.
   v85 (2026-05-09): user request — when registered, no arrow needed. */
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success .th-signup-btn-icon,
body.is-terminal-home button.th-signup-btn.is-success .th-signup-btn-icon,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success .th-paywall-btn-arrow,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn.is-success .th-paywall-btn-arrow {
	display: none !important;
}
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success:active,
body.is-terminal-home button.th-signup-btn.is-success:active,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success:active {
	transform: none !important;
}
/* v87 (2026-05-09): pointer-events:none on success — disabled attr already
   set via JS, but pointer-events provides defense in depth. Even if disabled
   gets removed externally (extension, devtools), no click reaches button. */
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success,
body.is-terminal-home button.th-signup-btn.is-success,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn.is-success {
	pointer-events: none !important;
	user-select: none !important;
}
/* v88 (2026-05-09): force full opacity on is-success — browsers apply
   opacity:0.5 to disabled buttons by default, making the green "REGISTRADO"
   look faded. We need full opacity for visibility — disabled is purely
   functional (via JS), visual confirmation must stay vibrant. Also matches
   on :disabled state combo since both classes are present. */
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success,
body.is-terminal-home .th-signup-form > button.th-signup-btn.is-success:disabled,
body.is-terminal-home button.th-signup-btn.is-success,
body.is-terminal-home button.th-signup-btn.is-success:disabled,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card button.th-paywall-btn.is-success:disabled,
body:is(.is-terminal-home, .page-terminal) .th-paywall-inline-card a.th-paywall-btn.is-success {
	opacity: 1 !important;
	filter: none !important;
}

/* ============================================================
   TERMINAL CTA — orange (#E37E54) + black text
   v84 (2026-05-09): user request — for free members in mobile navbar
   AND in mobile-links (members + anonymous, NOT paid). Same gradient
   structure as the silver/red CTAs but orange tinted body.
   ============================================================ */
/* Mobile navbar TERMINAL (.th-mn-cta-terminal modifier on .th-mn-cta) */
body.is-terminal-home a.th-mn-cta.th-mn-cta-terminal,
body.is-terminal-home a.th-mn-cta.th-mn-cta-terminal:link,
body.is-terminal-home a.th-mn-cta.th-mn-cta-terminal:visited {
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0.18) 47%,
			rgba(255, 255, 255, 0.0) 48%,
			rgba(0, 0, 0, 0.06) 100%),
		linear-gradient(180deg,
			#F4956D 0%,
			#E37E54 50%,
			#B8633D 100%) !important;
	border: 1px solid #8C4528 !important;
	color: #000000 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 1px 2px rgba(0, 0, 0, 0.20) !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
body.is-terminal-home a.th-mn-cta.th-mn-cta-terminal:hover,
body.is-terminal-home a.th-mn-cta.th-mn-cta-terminal:active {
	filter: brightness(1.06);
	color: #000000 !important;
}

/* Mobile-links TERMINAL link (.th-bb-mobile-link-terminal modifier on the <a>) */
body.is-terminal-home .th-bb-mobile-links a.th-bb-mobile-link-terminal,
body.is-terminal-home .th-bb-mobile-links a.th-bb-mobile-link-terminal:link,
body.is-terminal-home .th-bb-mobile-links a.th-bb-mobile-link-terminal:visited {
	background: #E37E54 !important;
	color: #000 !important;
}
body.is-terminal-home .th-bb-mobile-links a.th-bb-mobile-link-terminal:hover,
body.is-terminal-home .th-bb-mobile-links a.th-bb-mobile-link-terminal:active {
	background: #F09063 !important;
	color: #000 !important;
}

/* ============================================================================
   SKIP-TO-CONTENT (WCAG 2.4.1 Bypass Blocks)
   ============================================================================
   Movido aquí 2026-05-14 desde el bloque <style> inline de page-terminal.hbs
   (líneas 122-143 del template original) para que también aplique en
   page-libro-de-operaciones.hbs y post-libro-de-operaciones.hbs, que NO
   incluyen ese <style> inline.

   Patrón: link invisible (off-screen vía top:-100px) hasta recibir foco
   (Tab desde el primer elemento). Permite usuarios con screen reader o
   navegación por teclado saltar la navegación superior y llegar directo
   al contenido principal (#content-libro / #th-main-content).
   ============================================================================ */
.th-skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 9999;
	padding: 10px 16px;
	background: #FBEC90;
	color: #000;
	font-family: 'Iosevka Aile Web', 'Iosevka Aile', monospace;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
	transition: top 0.15s ease;
}
.th-skip-link:focus,
.th-skip-link:focus-visible {
	top: 8px;
	outline: 2px solid #EEA020;
	outline-offset: 2px;
}

/* ============================================================================
   ANTI-COPY CSS (paid content protection)
   ============================================================================
   Movido 2026-05-14 desde el bloque <style> inline de page-terminal.hbs
   (líneas 162-177 del template original) para que también aplique en
   page-libro-de-operaciones.hbs y post-libro-de-operaciones.hbs, que NO
   incluyen ese <style> inline.

   Aplica a body.is-terminal-page (presente en /terminal/, /libro-de-operaciones/)
   y a TODOS sus descendientes con !important para sobreescribir cualquier
   user-select:text del navegador.

   Excepciones: <input>, <textarea>, [contenteditable="true"] — deben
   permitir selección para que los forms funcionen (incluido checkbox TOS).
   ============================================================================ */
body.is-terminal-page,
body.is-terminal-page * {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
	-webkit-touch-callout: none !important;  /* iOS: no popover de "Copy" */
}
body.is-terminal-page input,
body.is-terminal-page textarea,
body.is-terminal-page [contenteditable="true"] {
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
}

/* ============================================================================
   LIBRO DE OPERACIONES — overrides específicos de la page
   ============================================================================
   2026-05-14: Mi page hereda `is-terminal-home` del shell para reusar las
   754 reglas CSS de /terminal/, PERO algunas reglas del shell asumen
   estructura específica de /terminal/ (brand-block, mobile-links, etc.)
   que mi page no tiene. Estos overrides corrigen los mismatches visuales.
   ============================================================================ */

/* Mobile: corregir padding-top excesivo del body.
   body.is-terminal-home en mobile tiene `padding-top: calc(130px + safe-area)`
   diseñado para clear (1) mobile-nav fija 52px y (2) ~78px del brand-block
   que /terminal/ renderiza debajo. Mi libro NO tiene brand-block, así que
   los 78px adicionales son espacio vacío entre la mobile-nav y mis tabs.
   Bajamos a solo el clear de mobile-nav. */
@media (max-width: 720px) {
	body.is-libro-de-operaciones-page {
		padding-top: calc(52px + env(safe-area-inset-top)) !important;
	}
}

/* Mobile: defense-in-depth contra tabla overflow horizontal.
   La tabla #tw tiene ~10 columnas. En mobile estrecho (<400px) puede no
   caber. El bot ya reduce font-size en mobile pero no agrega overflow.
   Permitimos scroll horizontal SOLO dentro del wrapper de la tabla — el
   body queda en su ancho normal para que la mobile-nav fija siga
   visualmente correcta. */
@media (max-width: 720px) {
	body.is-libro-de-operaciones-page .rt-premium-content {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL ANTI-COPY: user-select:none on all pages.
   Exceptions: input, textarea, [contenteditable] restore text selection.
   Combined with contextmenu/copy/cut/keyboard JS blocker in custom.js.
   ════════════════════════════════════════════════════════════════════════ */
body,
body * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
body input,
body textarea,
body [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}