/*
 * CyberRamen.com — Main Stylesheet
 *
 * Professional security tools site with warm cream + red accent.
 * Clean, minimal, content-first.
 *
 * Evidence: Lingaard 2022 (16px+ body), NNGroup (50-75ch line length),
 * Shift eLearning (1.5-1.7 line height), WCAG 2.2 (AA 4.5:1 contrast),
 * Gullikson IA study, Shaikh & Lenz (search placement).
 */

:root {
    --cream:        #f2ebe0;
    --cream-dark:   #e8e0d2;
    --cream-darker: #d8cebb;
    --red:          #a32b1f;   /* 2026-09-17: was #b83224 (4.07:1 on its dim wash over --cream-dark, 3.83:1 on --cream-darker); now 5.0 / 4.6 */
    --red-hover:    #9c2a1e;
    --red-dim:      rgba(163, 43, 31, 0.06);
    --ink:          #1a1210;
    --ink-light:    #4a3e38;
    /* --ink-muted / --ink-faint darkened to clear WCAG 2.1 AA (4.5:1) for
       normal-size text on --cream. Previously 4.17:1 and 3.30:1. Hue and
       saturation unchanged; lightness lowered to the minimum that passes. */
    --ink-muted:    #605550;   /* 6.1:1 on --cream, 4.6:1 on --cream-darker, 5.0:1 on an ink wash over --cream-dark (2026-09-17: was #746961 = 4.07 on cream-dark) */
    --ink-faint:    #605550;   /* same — used for the same kind of secondary text */
    /* Decorative-only tint. Never use for text — 3.30:1 on --cream. */
    --ink-faint-decorative: #8a7f76;

    /* Border for controls whose boundary is the only affordance (inputs,
       selects, buttons). --cream-darker is 1.32:1 on cream, below the 3:1
       required by WCAG 1.4.11; this is --ink at 50% over cream = 3.37:1. */
    --border-control: rgba(26, 18, 16, 0.5);

    --font-display: 'Syne', 'Orbitron', sans-serif;
    --font-mono:    'IBM Plex Mono', 'Share Tech Mono', monospace;

    /* tools.css contract */
    --bg-deep: var(--cream);
    --bg-primary: var(--cream);
    --bg-card: var(--cream);
    --bg-card-hover: var(--cream-dark);
    --bg-elevated: var(--cream);
    --neon-pink: var(--red); --neon-cyan: var(--red); --neon-yellow: var(--red);
    --neon-green: var(--red); --neon-orange: var(--red); --neon-purple: var(--red);
    --text-primary: var(--ink); --text-secondary: var(--ink-light);
    --text-muted: var(--ink-muted); --text-dim: var(--ink-faint);
    --border-subtle: var(--cream-darker); --border-glow: var(--red);
    --glow-pink: none; --glow-cyan: none; --glow-yellow: none; --glow-green: none;
    --font-body: var(--font-mono); --font-heading: var(--font-display);
    --font-accent: var(--font-display);
    --color-bg: var(--cream); --color-bg-secondary: var(--cream-dark);
    --color-bg-tertiary: var(--cream-darker); --color-bg-card: var(--cream);
    --color-border: var(--cream-darker); --color-border-input: var(--border-control);
    --color-border-hover: var(--red);
    --color-text: var(--ink); --color-text-muted: var(--ink-muted);
    --color-accent: var(--red); --color-accent-hover: var(--red-hover);
    --color-accent-strong: var(--red);
    /* --color-success / --color-warning darkened to clear AA (4.5:1) on
       --cream. Previously 4.33:1 and 3.20:1 — both failed for small text
       such as badge labels. The *-bg washes below are unchanged. */
    /* 2026-09-16: darkened again so they also clear AA on --cream-dark (cards,
       result boxes) where most badges actually sit: success 5.50/4.97,
       warning 5.43/4.90 (cream/cream-dark). */
    --color-error: #a81a1a; --color-success: #23612a;
    --color-warning: #963600; --color-info: var(--red);
    /* 2026-09-17: darkened once more (from #b71c1c/#276b2b/#a63c00) so each also
       clears 4.5:1 on its own tinted badge wash over --cream-dark. */
    /* Severity scale for scores/badges (CVSS, phishing risk, timeline,
       posture…). Replaces the dark-theme hexes (#7d7 #fa0 #f84 #f44 #eab308…)
       that were at 1.4–3:1 on cream. All ≥ 4.9:1 on --cream-dark. */
    --sev-none: var(--ink-muted);
    --sev-low: #2c5aa0;       --sev-low-bg: rgba(44,90,160,0.10);
    --sev-medium: #7a5600;    --sev-medium-bg: rgba(122,86,0,0.12);
    --sev-high: #963600;      --sev-high-bg: rgba(150,54,0,0.10);
    --sev-critical: #a81a1a;  --sev-critical-bg: rgba(168,26,26,0.10);
    --sev-good: #23612a;      --sev-good-bg: rgba(35,97,42,0.10);
    --color-link: var(--red); --color-link-hover: var(--red-hover);
    --color-success-bg: rgba(35,97,42,0.08);
    --color-error-bg: rgba(168,26,26,0.08);
    --color-error-bg-strong: rgba(168,26,26,0.14);
    --color-warning-bg: rgba(150,54,0,0.08);
    --color-accent-bg: var(--red-dim);
    /* Tinted badge/status surfaces + their borders (was #d4edda/#fce8cc/#f8d7d2/#dbe6f6
       hard-coded in tools.css and ~60 tool pages). Alpha washes so they sit on
       any surface and follow the dark scheme below. */
    --ok-bg:   rgba(35,97,42,0.10);    --ok-line:   rgba(35,97,42,0.35);
    --warn-bg: rgba(150,54,0,0.10);    --warn-line: rgba(150,54,0,0.35);
    --err-bg:  rgba(168,26,26,0.10);   --err-line:  rgba(168,26,26,0.32);
    --info:    #2c5aa0; --info-bg: rgba(44,90,160,0.10); --info-line: rgba(44,90,160,0.32);
    --purple:  #6b2d8b; --purple-bg: rgba(107,45,139,0.10); --purple-line: rgba(107,45,139,0.30);
    --teal:    #0a6e8c; --teal-bg: rgba(10,110,140,0.10);
    /* Solid surfaces for tool chrome (inputs, cards on cards, code boxes). */
    --surface:       #ffffff;    /* was #fff in tool CSS: inputs / white cards */
    --surface-2:     #f8f6f1;    /* was #f8f9fa / #f4f4f4 / #f5f5f5: subtle panels */
    --code-bg:       #1a1210;    /* dark code boxes keep their look in both schemes */
    --code-ink:      #f2ebe0;
    --on-dark:       #f2ebe0;    /* text on solid accent / ink surfaces */
    --wash:          rgba(26,18,16,0.05);  /* faint ink wash (zebra rows, hover) — was rgba(26,18,16,.04–.06) / rgba(0,0,0,.02–.04) */
    --wash-strong:   rgba(26,18,16,0.10);
    --color-accent-bg-subtle: rgba(163,43,31,0.04);
    --color-primary: var(--cream);

    /* Aliases consumed by AI / Robo Ramen tools.
       These bridge a few names invented in tool inline-CSS so they resolve
       to a cream-tinted surface (was falling back to a dark-theme hex). */
    --color-bg-elev: var(--cream-dark);
    --color-bg-elev-2: var(--cream-darker);
    --color-info-bg: var(--color-accent-bg-subtle);
    --color-info-bg-strong: var(--color-accent-bg);

    /* Spacing scale */
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;

    /* Shared tokens */
    --border-radius: 4px;
    --font-size-sm: 0.85rem;
    --transition: 0.15s ease;
}


/* =====================================================================
   Dark scheme — site-wide (2026-09-17; homepage-only since 09-16).
   Only tokens are redefined here; every stylesheet and tool page reads
   tokens (tests/e2e/dark-audit.js renders every page under the dark scheme
   and fails on AA contrast misses or hard-coded light surfaces).
   Overrides live on :root, the same element as the aliases in shell.css
   (--bg: var(--cream)…) so those resolve against the dark palette too.
   ===================================================================== */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --cream: #1a1210; --cream-dark: #26201c; --cream-darker: #3a312b;
        --ink: #f2ebe0; --ink-light: #d9d0c2; --ink-muted: #b3a89b; --ink-faint: #b3a89b;
        --ink-faint-decorative: #7a6f65;
        --red: #f58572; --red-hover: #ff9c8a; --red-dim: rgba(245, 133, 114, 0.10); /* 5.1:1 on --cream-darker; dim wash kept faint so red text stays >= 4.5:1 on it */
        --border-control: rgba(242, 235, 224, 0.45);
        /* semantic (all >= 5.4:1 on --cream-dark) */
        --color-error: #ff8a78; --color-success: #8fd494; --color-warning: #f3b078;
        --sev-low: #8fb6f0;       --sev-low-bg: rgba(143,182,240,0.16);
        --sev-medium: #dcb15a;    --sev-medium-bg: rgba(220,177,90,0.16);
        --sev-high: #f39a63;      --sev-high-bg: rgba(243,154,99,0.16);
        --sev-critical: #ff8a78;  --sev-critical-bg: rgba(255,138,120,0.16);
        --sev-good: #8fd494;      --sev-good-bg: rgba(143,212,148,0.16);
        --color-success-bg: rgba(143,212,148,0.14);
        --color-error-bg: rgba(255,138,120,0.14); --color-error-bg-strong: rgba(255,138,120,0.18);
        --color-warning-bg: rgba(243,176,120,0.14);
        --color-accent-bg-subtle: rgba(239,110,92,0.08);
        --ok-bg:   rgba(143,212,148,0.16); --ok-line:   rgba(143,212,148,0.40);
        --warn-bg: rgba(243,176,120,0.16); --warn-line: rgba(243,176,120,0.40);
        --err-bg:  rgba(255,138,120,0.16); --err-line:  rgba(255,138,120,0.40);
        --info: #8fb6f0; --info-bg: rgba(143,182,240,0.16); --info-line: rgba(143,182,240,0.40);
        --purple: #c9a0e6; --purple-bg: rgba(201,160,230,0.14); --purple-line: rgba(201,160,230,0.40);
        --teal: #6cc7d8; --teal-bg: rgba(108,199,216,0.14);
        --surface: #221b18; --surface-2: #26201c;
        --code-bg: #0f0b0a; --code-ink: #f2ebe0;
        --on-dark: #f2ebe0;
        --wash: rgba(242,235,224,0.06); --wash-strong: rgba(242,235,224,0.12);
    }
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.7;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--red-hover); }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip-link {
    position: absolute; top: -100%; left: 1rem;
    background: var(--red); color: var(--on-accent);
    padding: 0.5rem 1rem; font-weight: 700; z-index: 9999;
}
.skip-link:focus { top: 0.5rem; }

.container { max-width: 1060px; margin: 0 auto; padding: 0 2rem; }


/* === Header === */
.header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1.5rem 0 1.2rem;
    border-bottom: 1px solid var(--cream-darker);
}

.header h1 {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1;
}
.header h1 a { color: var(--ink); }
.header h1 a:hover { color: var(--ink); }
.header h1 .cyber { color: var(--red); }
.header h1 .dot-com { color: var(--ink); }

.subtitle {
    font-size: 0.68rem; color: var(--ink-faint);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-top: 0.15rem;
}

.nav { display: flex; gap: 0.15rem; flex-wrap: wrap; margin-top: 0.5rem; }
.nav a {
    padding: 0.35rem 0.65rem; font-size: 0.76rem;
    color: var(--ink-muted); letter-spacing: 0.02em;
}
.nav a:hover { color: var(--red); }
.nav a.active { color: var(--red); font-weight: 600; }
.nav-role-sep { display: none; }


/* === Hero === */
.cyber-hero { text-align: center; padding: 3.5rem 0 2rem; }
.cyber-hero::before, .cyber-hero::after { display: none; }
.hero-content { max-width: 620px; margin: 0 auto; }


.shop-sign {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 2.8rem);
    font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.1; margin: 0.6rem 0 0.2rem;
}
.shop-sign .cyber { color: var(--red); }
.shop-sign .ramen { color: var(--ink); }

.shop-tagline { font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.shop-subtitle {
    font-size: 0.88rem; color: var(--ink-muted); line-height: 1.7;
    max-width: 50ch; margin: 0 auto 1.5rem;
}

.last-updated-banner {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--red);
    letter-spacing: 0.04em;
    margin: 0 auto 1.25rem;
}

/* Trust badges */
.trust-strip { margin-bottom: 1.5rem; }
.trust-strip-tagline { font-size: 0.72rem; color: var(--ink-faint); margin-bottom: 0.5rem; }
.trust-strip-badges { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; }
.trust-badge {
    font-size: 0.68rem; color: var(--ink-muted);
    background: var(--cream-dark); padding: 0.3rem 0.7rem;
    border-radius: 3px; letter-spacing: 0.02em;
}

/* Stats */
.hero-stats { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat-num {
    font-family: var(--font-display); font-size: 1.6rem;
    font-weight: 800; color: var(--red); line-height: 1.2;
}
.hero-stat-label { font-size: 0.7rem; color: var(--ink-faint); }


/* === Page Disclaimer === */
.page-disclaimer {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--red);
    line-height: 1.5;
    margin-top: 0.5rem;
}


/* === Dividers === */
.jp-divider {
    text-align: center; padding: 1rem 0; font-size: 0.75rem;
    color: var(--ink-faint); letter-spacing: 0.25em;
}
.jp-divider::before, .jp-divider::after { display: none; }


/* === Quick links === */
.quick-links {
    display: flex; justify-content: center; gap: 0.5rem;
    flex-wrap: wrap; padding: 0.5rem 0 2rem;
}
.quick-links a {
    padding: 0.45rem 1.1rem; font-size: 0.78rem;
    color: var(--red); border: 1px solid var(--red);
    border-radius: 4px; min-height: 44px;
    display: inline-flex; align-items: center;
    font-weight: 500; transition: background 0.15s, color 0.15s;
}
.quick-links a::before { display: none; }
.quick-links a:hover { background: var(--red); color: var(--on-accent); }


/* === Menu sections === */
.menu-section { margin-bottom: 2.5rem; }

.menu-header {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding-bottom: 0.6rem; border-bottom: 2px solid var(--red);
    margin-bottom: 1rem;
}
.menu-header::before { display: none; }
.menu-icon { font-size: 1.1rem; }
.menu-title {
    font-family: var(--font-display); font-size: 1.1rem;
    font-weight: 800; color: var(--ink);
}
.menu-jp { font-size: 0.9rem; color: var(--ink-faint); letter-spacing: 0.06em; }
/* Stated once per section rather than repeated under all 131 tools. */
.menu-section-price {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
    white-space: nowrap;
}
@media (max-width: 600px) { .menu-section-price { display: none; } }

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.5rem;
}

.menu-item {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1rem 1.1rem; border-radius: 6px;
    text-decoration: none; transition: background 0.15s;
    border: 1px solid transparent;
}
.menu-item::before { display: none; }
.menu-item:hover { background: var(--cream-dark); border-color: var(--cream-darker); }
.menu-item:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.menu-item-top { display: flex; align-items: center; gap: 0.4rem; }
.menu-item-icon { font-size: 1rem; }
.menu-item-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.menu-item-desc { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.65; flex: 1; }
.menu-item-price { font-size: 0.68rem; color: var(--ink-faint); font-style: italic; }

.browse-all { text-align: center; padding: 1.2rem 0; }
.browse-all a { font-size: 0.85rem; color: var(--red); font-weight: 600; }


/* === Home info === */
.home-info {
    background: var(--cream-dark); border-radius: 6px;
    padding: 1.2rem 1.5rem; text-align: center; margin-bottom: 2rem;
}
.home-info p { font-size: 0.82rem; color: var(--ink-muted); margin: 0 auto; }
.home-info p + p { margin-top: 0.25rem; }
.home-info .home-updated {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--cream-darker);
    font-size: 0.72rem;
    color: var(--ink-faint);
}


/* === Buttons === */
.btn, button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 44px; padding: 0.5rem 1.2rem;
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
    background: var(--cream); border: 1px solid var(--cream-darker);
    color: var(--ink-light); cursor: pointer; text-decoration: none;
    border-radius: 4px; transition: border-color 0.15s, color 0.15s;
}
.btn::before, button::before { display: none; }
/* Compact variant used inside tables / result rows by 35 tools (was never
   defined, so they rendered full-size). 32px keeps WCAG 2.2 target size. */
.btn-sm, button.btn-sm { min-height: 32px; padding: 0.3rem 0.7rem; font-size: 0.74rem; gap: 0.3rem; }
.btn:hover, button:hover { border-color: var(--red); color: var(--red); }
.btn:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.btn-primary { background: var(--red); color: var(--on-accent); border-color: var(--red); }
.btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); color: var(--on-accent); }


/* === Forms === */
input, select, textarea {
    font-family: var(--font-mono); font-size: 0.88rem;
    color: var(--ink); background: var(--cream);
    /* --border-control, not --cream-darker: an input's border is the only
       thing marking its boundary, so WCAG 1.4.11 requires 3:1. */
    border: 1px solid var(--border-control); padding: 0.55rem 0.8rem;
    border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--red);
    outline: 2px solid var(--red);
    outline-offset: 1px;
}
input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) {
    border-color: var(--red);
    outline: none;
    box-shadow: 0 0 0 3px var(--red-dim);
}

.search-box {
    width: 100%; max-width: 480px; display: block; margin: 0 auto;
    padding: 0.6rem 0.9rem; background: var(--cream-dark);
    border: 1px solid var(--cream-darker); border-radius: 5px;
    font-family: var(--font-mono); font-size: 0.88rem;
    color: var(--ink); min-height: 44px;
}
.search-box::placeholder { color: var(--ink-faint); }
.search-box:focus-visible { border-color: var(--red); outline: 2px solid var(--red); outline-offset: 1px; }
.search-box:focus:not(:focus-visible) { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px var(--red-dim); }


/* === Footer === */
.footer {
    border-top: 1px solid var(--cream-darker);
    padding: 2rem 0 1.5rem; text-align: center; margin-top: 3rem;
}
.footer::before { display: none; }
.footer-ramen { font-size: 1.3rem; margin-bottom: 0.5rem; opacity: 0.5; }
.footer-badges { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.footer-badge {
    font-size: 0.65rem; color: var(--ink-faint);
    background: var(--cream-dark); padding: 0.2rem 0.55rem;
    border-radius: 3px;
}
.footer-privacy-note {
    font-size: 0.75rem; color: var(--ink-muted); line-height: 1.7;
    max-width: 58ch; margin: 0 auto 0.75rem;
}
.footer-contact {
    font-size: 0.75rem;
    color: var(--ink-muted);
    margin-bottom: 0.65rem;
}
.footer-contact a {
    color: var(--red);
    font-weight: 600;
}
.footer-links { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.footer-links a { font-size: 0.75rem; color: var(--ink-muted); }
.footer-links a:hover { color: var(--red); }
.footer p { font-size: 0.72rem; color: var(--ink-faint); }
.footer a { color: var(--red); }


/* === Tools page === */
.menu-banner { text-align: center; padding: 2.5rem 0 1rem; }
.t-pink, .t-cyan { color: var(--red); }
.menu-count { font-size: 0.82rem; color: var(--ink-muted); margin-bottom: 1rem; }
.menu-divider { border: none; border-top: 1px solid var(--cream-darker); margin: 1rem 0; }

.filter-pills {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    justify-content: center; margin-bottom: 1.5rem;
}
.filter-pill {
    padding: 0.45rem 0.8rem; font-size: 0.72rem;
    font-family: var(--font-mono); font-weight: 500;
    color: var(--ink-muted); background: var(--cream-dark);
    border: 1px solid transparent; border-radius: 4px;
    cursor: pointer; min-height: 44px;
    display: inline-flex; align-items: center;
    transition: all 0.15s;
}
.filter-pill:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.filter-pill:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.filter-pill.active { background: var(--red); color: var(--on-accent); border-color: var(--red); }
.filter-pill-count { font-size: 0.65rem; opacity: 0.6; margin-left: 0.25rem; }

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.5rem; margin-bottom: 2rem;
}

.tool-card {
    padding: 1rem 1.1rem; border-radius: 6px;
    text-decoration: none; border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.tool-card::before { display: none; }
.tool-card:hover { background: var(--cream-dark); border-color: var(--cream-darker); }
.tool-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tool-card-link { text-decoration: none; color: inherit; }
.tool-card-link:hover { text-decoration: none; }
.tool-icon { font-size: 1.1rem; margin-bottom: 0.35rem; }
.tool-card h3 { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; line-height: 1.3; }
.tool-card p { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.6; }

.hidden-by-filter, .hidden-by-search { display: none !important; }
.no-results, .empty-state { text-align: center; padding: 2.5rem 1rem; }
.empty-state-icon { font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.3; }
.empty-state-text { color: var(--ink-light); }
.empty-state-hint { font-size: 0.82rem; color: var(--ink-muted); }

.menu-categories { margin-bottom: 2rem; }
.menu-cat { margin-bottom: 1.5rem; }
.menu-cat-header {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding-bottom: 0.4rem; border-bottom: 2px solid var(--red); margin-bottom: 0.5rem;
}
.menu-cat-icon { font-size: 1rem; }
.menu-cat-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.menu-cat-jp { font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.06em; }
.menu-cat-sub { font-size: 0.75rem; color: var(--ink-muted); margin-left: auto; }

.menu-dish {
    display: flex; align-items: baseline; gap: 0.4rem;
    padding: 0.4rem 0; font-size: 0.82rem;
    color: var(--ink-light); text-decoration: none;
}
.menu-dish:hover { color: var(--red); }
.menu-dish-icon { flex-shrink: 0; }
.menu-dish-name { white-space: nowrap; }
.menu-dish-dots { flex: 1; border-bottom: 1px dotted var(--cream-darker); min-width: 1.5rem; margin: 0 0.2rem; position: relative; top: -0.15em; }
.menu-dish-price { font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; }
.ramen-deco { text-align: center; font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.15em; padding: 0.5rem 0; }


.search-hint { font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.4rem; text-align: center; }
.search-results { margin-top: 0.75rem; }
.search-result-item { padding: 0.5rem 0; border-bottom: 1px solid var(--cream-darker); }
.search-snippet { font-size: 0.78rem; color: var(--ink-muted); }
.list { list-style: none; }
.list-item { padding: 0.55rem 0; border-bottom: 1px solid var(--cream-darker); }
.list-item:last-child { border-bottom: none; }
.back-link { display: inline-block; margin-bottom: 0.75rem; font-size: 0.78rem; color: var(--ink-muted); }
.back-link:hover { color: var(--red); }


/* === About === */
.about-hero { text-align: center; padding: 2.5rem 0 1rem; }
.about-tagline { font-size: 0.9rem; color: var(--ink-muted); max-width: 48ch; margin: 0 auto; }
.about-section { margin-bottom: 1.5rem; }
.about-section h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }
.about-badge-row { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }
.about-badge { font-size: 0.68rem; color: var(--ink-muted); background: var(--cream-dark); padding: 0.2rem 0.55rem; border-radius: 3px; }
.about-contact { font-size: 0.88rem; color: var(--ink-light); }
.about-divider { border: none; border-top: 1px solid var(--cream-darker); margin: 1.2rem 0; }


/* === Awareness & Phishing === */
.awareness-hero, .phishing-hero { text-align: center; padding: 2.5rem 0 1rem; }
.hub-title { font-family: var(--font-serif, var(--font-display)); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); margin-bottom: 0.3rem; }
.jp-label { font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.tagline { font-size: 0.88rem; color: var(--ink-muted); max-width: 48ch; margin: 0 auto 0.3rem; }
.sub-line { font-size: 0.78rem; color: var(--ink-faint); }

.hub-grid, .module-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem; margin: 1.5rem 0 2rem;
}
.hub-card, .module-card {
    padding: 1rem 1.1rem; border-radius: 6px;
    text-decoration: none; display: flex; flex-direction: column; gap: 0.3rem;
    border: 1px solid transparent; transition: background 0.15s, border-color 0.15s;
}
.hub-card:hover, .module-card:hover { background: var(--cream-dark); border-color: var(--cream-darker); }
.hub-card:focus-visible, .module-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.card-icon { font-size: 1.1rem; }
.card-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.card-desc { font-size: 0.78rem; color: var(--ink-muted); line-height: 1.6; flex: 1; }
.card-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.2rem; }
.format-badge, .difficulty-chip {
    font-size: 0.62rem; padding: 0.15rem 0.4rem;
    background: var(--cream-dark); color: var(--ink-muted);
    border-radius: 3px;
}
.card-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.card-cta { font-size: 0.75rem; color: var(--red); font-weight: 500; margin-top: 0.3rem; }
.explore-more { text-align: center; margin: 1rem 0; }
.privacy-notice {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1rem; background: var(--cream-dark);
    border-left: 3px solid var(--red); border-radius: 0 5px 5px 0;
    font-size: 0.78rem; color: var(--ink-muted); line-height: 1.6; margin-bottom: 1rem;
}
/* === Scroll reveal ===
   Content is VISIBLE by default and only opts into the fade-in once
   scroll-reveal.js has actually run and put `js-reveal` on <html>. Gating it
   this way is load-bearing: these rules used to hide the element unconditionally
   and rely on the script to un-hide it, so when the script failed to load the
   Certifications roadmaps and deep dives — and the equivalent awareness content
   — were permanently invisible, with no error anywhere to explain it.
   Section stylesheets must not redefine .scroll-reveal; this is the one copy. */
.scroll-reveal { opacity: 1; }
html.js-reveal .scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-reveal .scroll-reveal.revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .scroll-reveal,
    html.js-reveal .scroll-reveal.revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* === Generic === */
.card, .featured-card, .content-box { background: var(--cream); border: 1px solid var(--cream-darker); border-radius: 6px; padding: 1rem; }
.card:hover, .featured-card:hover { border-color: var(--red); }
.stat-box { background: var(--cream-dark); border-radius: 6px; padding: 1rem; text-align: center; }

table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--cream-darker); }
th { color: var(--red); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.03em; }
td { color: var(--ink-light); }

pre {
    background: var(--cream-dark); border-radius: 6px; padding: 1rem;
    overflow-x: auto; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7;
}
code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--red-dim); color: var(--red);
    padding: 0.1em 0.35em; border-radius: 3px;
    overflow-wrap: anywhere; /* long hashes/keys in running text wrap instead of widening the page */
}
code::before { display: none; }
img { max-width: 100%; height: auto; }

.feed-item, .exploit-item, .vulnerability-item, .cve-item { padding: 0.5rem 0; border-bottom: 1px solid var(--cream-darker); }
.result-block { background: var(--cream-dark); border-radius: 6px; padding: 0.8rem; margin-bottom: 0.5rem; }
.qr-code-display { background: #fff; padding: 1rem; display: inline-block; border-radius: 6px; } /* QR quiet zone must stay white (scanners) */
.qr-code-display::after { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }


/* === Responsive === */
@media (max-width: 768px) {
    .container { padding: 0 1.2rem; }
    .header { flex-direction: column; gap: 0.5rem; }
    .nav a { padding: 0.25rem 0.45rem; font-size: 0.7rem; }
    .cyber-hero { padding: 2rem 0 1.5rem; }
    .shop-sign { font-size: 1.8rem; }
    .menu-grid, .tools-grid, .hub-grid, .module-cards { grid-template-columns: 1fr; }
    .hero-stats { gap: 1.2rem; }
}

@media (max-width: 480px) {
    .quick-links { flex-direction: column; align-items: center; }
    .trust-strip-badges { gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

@media print {
    body { background: #fff; color: #000; }
    .header, .footer, .cyber-hero, .trust-strip, .quick-links, .jp-divider { display: none; }
}


/* === Share Button === */
.share-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 0.6rem;
}

.share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    background: transparent;
    border: 1px solid var(--cream-darker);
    border-radius: 4px;
    color: var(--ink-faint);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.share-trigger:hover {
    color: var(--red);
    border-color: var(--red);
}
.share-trigger:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
.share-trigger__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.share-trigger__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* Dropdown */
.share-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background: var(--cream);
    border: 1px solid var(--cream-darker);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(26, 18, 16, 0.08);
    z-index: 100;
    padding: 4px 0;
}
.share-dropdown[hidden] { display: none; }

.share-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-light);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, color 0.1s;
}
.share-dropdown__item:hover {
    background: var(--cream-dark);
    color: var(--red);
    border-color: transparent;
}
.share-dropdown__item:focus-visible {
    background: var(--cream-dark);
    color: var(--red);
    outline: 2px solid var(--red);
    outline-offset: -2px;
}
.share-dropdown__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-faint);
    flex-shrink: 0;
}
.share-dropdown__item:hover .share-dropdown__icon {
    color: var(--red);
}

/* Toast */
.share-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}
.share-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Page FAQ (includes/tool-faq.php): plain headings + paragraphs, always visible. */
.tool-faq { margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line, var(--color-border)); max-width: 75ch; }
.tool-faq h2 { margin: 0 0 1rem; }
.tool-faq h3 { margin: 1.25rem 0 0.35rem; font-size: 1.02rem; }
.tool-faq p { margin: 0; line-height: 1.65; color: var(--ink-2, inherit); }
/* Longer explanatory copy on tool pages ("How to use", "Reading the result"). */
.tool-guide { margin: 2rem 0 0; max-width: 75ch; line-height: 1.65; }
.tool-guide h2 { margin: 1.75rem 0 0.6rem; }
.tool-guide ol, .tool-guide ul { padding-left: 1.3rem; }
.tool-guide li { margin-bottom: 0.4rem; }
/* Comparison tables in hub guides (hubs/pgp.php). */
.hub-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.9rem; }
.hub-table th, .hub-table td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--line, var(--color-border)); text-align: left; vertical-align: top; }
.hub-table thead th { font-size: 0.8rem; color: var(--ink-3, inherit); }