/* ==========================================================================
   INTELLIGENCE (WIKI) — shared shell + hub styling
   Ported from T7Project/Intillegence.php's <style> block (extracted per the
   owner's "external CSS only" rule). Reuses the shared T7 tokens defined in
   t7-theme.css (--fire-orange, --fire-yellow, --gold-light, --glass-bg,
   --glass-border, ...). Do NOT redeclare the palette here.
   All grid/flex cards carry `min-width: 0; overflow: hidden;` + text clamping
   per the repo CSS-overflow rule; the page body never scrolls horizontally.
   ========================================================================== */

/* Page-local rarity accents (mockup values; not part of the shared token set).
   Namespaced under .intel-container so they cannot collide site-wide. */
.intel-container {
    --intel-rarity-common: #888888;
    --intel-rarity-rare: #4aa3ff;
    --intel-rarity-epic: #b15bff;
    --intel-rarity-legendary: #ff8c00;
    --intel-tag-new: #00e5ff;

    /* Wiki nav/search stacking ladder (shared tokens, defined ONCE here so the
       relationship is explicit instead of two drifting magic numbers). Both the
       grouped nav and the search bar are siblings inside this container, which is
       intentionally NOT a stacking context (see the background note below), so
       these two values rank the two contexts directly against each other.

       Ordering rationale: an OPEN nav dropdown drops DOWN over the search bar
       that sits just beneath the nav, so the NAV context MUST outrank the SEARCH
       context — otherwise the search bar (a) paints over the open dropdown and
       (b) steals the cursor's :hover as it travels down the menu, collapsing the
       pure-CSS `.intel-nav-group:hover` reveal and closing the menu mid-move.
       The search results panel still paints over page content because the page
       content column is NOT a stacking context (auto < any positive z-index).
       Both sit just above the site's fixed bottom-nav (--site-nav-z=1080) and
       below the site drawer (--site-drawer-z=1088) / ticker (1100) so those
       still overlay both.

       LOAD-BEARING (2026-07-27): "below the site drawer" is only true because
       mobile-bottom-nav.css promotes the `.site-bottom-nav` WRAPPER to
       --site-drawer-z under `body.site-drawer-active`. The wrapper is
       `position: fixed; z-index: --site-nav-z`, i.e. a stacking context, so the
       drawer's and backdrop's own z-index values are scoped INSIDE it and rank
       against this file's tokens at 1080, not at 1088. Without that promotion
       these two values (1085/1084) win, and the wiki tab strip + search bar
       paint OVER an open MORE menu, outside its dimming scrim (owner-reported).
       If you raise these tokens, raise them below --site-drawer-z or the bug
       returns. */
    --intel-nav-z: calc(var(--site-nav-z, 1080) + 5);
    --intel-search-z: calc(var(--site-nav-z, 1080) + 4);

    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   WIKI BACKGROUND TINT OVERLAY (owner request)
   Layer a black -> dark-red faded gradient (~50% overall) ON TOP OF the site's
   fixed t7 background (`.site-bg-stack`: position:fixed; z-index:0; isolate)
   but UNDER the wiki content + nav, so the fiery scene reads darker / on-brand
   while text, cards and the nav stay fully legible and clickable.

   Stacking rationale (why a *background layer*, not a positioned ::before):
   `.intel-container` must NOT become a stacking context -- the `.intel-nav`
   dropdown lives inside it and relies on escaping the container to rank above
   the site nav bar (see the nav z-index rule further below). A positioned
   overlay is a dead end here: with z-index >= 0 it paints OVER the content,
   and with z-index < 0 it escapes to the root stacking context and falls
   BEHIND the fixed site background. A background instead paints at the box's
   own base layer -- BELOW every child (content 100% readable), ABOVE the fixed
   site background (this column already paints above `.site-bg-stack`), it never
   intercepts pointer events, and it creates NO stacking context, so the nav is
   entirely untouched. The ~50% is baked into the gradient's rgba alpha stops
   (NOT the `opacity` property, which would fade the content too).
   `background-attachment: fixed` anchors the tint to the viewport so it tints
   the fixed t7 scene beneath it (mobile browsers that ignore `fixed` simply
   fall back to scrolling the tint with the column -- still correct). Covers the
   wiki content column on desktop and mobile alike. ASCII only. */
.intel-container {
    background-image:
        linear-gradient(
            180deg,
            rgba(4, 0, 0, 0.62) 0%,
            rgba(32, 3, 3, 0.50) 45%,
            rgba(74, 6, 6, 0.46) 100%
        ),
        radial-gradient(
            120% 85% at 50% 0%,
            rgba(92, 8, 8, 0.30) 0%,
            rgba(6, 0, 0, 0) 62%
        );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Page header (title + subtitle) */
.intel-header {
    width: 100%;
    max-width: 1100px;
    text-align: center;
    margin: 10px auto 26px;
    min-width: 0;
    overflow: hidden;
}
.intel-header h1 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--fire-yellow);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 18px var(--fire-orange);
    overflow: hidden;
    text-overflow: ellipsis;
}
.intel-header h1 i {
    color: var(--gold-light);
    margin-right: 10px;
}
/* Page description.
   The clamp is a RUNAWAY GUARD, not a design element — it must never cut an
   authored blurb. A fixed line count is the wrong unit here: line count scales
   with viewport width, so the old flat `-webkit-line-clamp: 3` silently cut the
   page's own explanation on 11 of 36 wiki pages at desktop AND every long blurb
   on mobile (measured 2026-07-27: /intelligence/stats rendered 3 of 5 lines at
   1280px and 3 of 10 lines at 390px — 70% of the sentence invisible, mid-word,
   with no "show more" affordance). The caps below sit just above the longest
   blurb actually authored at each width (5 lines desktop / 10 lines at 390px),
   so real copy always renders in full while a pathological future string still
   cannot blow up the header. Re-measure if the blurbs in
   intelligence_routes.INTEL_SECTIONS grow. */
.intel-header p {
    margin: 0 auto;
    max-width: 620px;
    color: rgba(240, 224, 196, 0.78);
    font-size: 0.98rem;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
}

/* ==========================================================================
   TAB STRIP (shared nav — _intel_nav.html)
   ========================================================================== */
.intel-nav {
    position: relative;
    /* The backdrop-filter below creates a STACKING CONTEXT on this element, which
       CAPS every descendant (incl. the open dropdown .intel-nav-menu) at THIS
       element's root z-index — a child's own z-index can never escape it. So the
       menu's z-index is irrelevant against site chrome; only the value HERE ranks
       the whole nav (+ its dropdowns) at the root. The site's fixed bottom-nav bar
       sits at --site-nav-z (1080); a hardcoded 1000 here left long dropdowns
       painting UNDER that bar. --intel-nav-z ranks just above it, and crucially
       ABOVE --intel-search-z (the sibling search bar) so an open dropdown wins the
       overlap over the search bar for BOTH paint order and pointer/hover hit-test;
       still below the site drawer (1088) and ticker (1100). See --intel-nav-z. */
    z-index: var(--intel-nav-z);
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    background: rgba(10, 0, 0, 0.6);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.intel-nav-btn {
    background: transparent;
    border: 2px solid transparent;
    color: #bfae94;
    padding: 11px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-nav-btn i { color: var(--gold-light); flex-shrink: 0; }
.intel-nav-btn:hover {
    color: #fff;
    background: rgba(255, 69, 0, 0.1);
}
.intel-nav-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.4), rgba(255, 69, 0, 0.2));
    border-color: var(--fire-orange);
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.4), inset 0 0 10px rgba(255, 0, 0, 0.2);
    text-shadow: 0 0 8px var(--fire-yellow);
}
.intel-nav-btn.is-active i { color: var(--fire-yellow); }
.intel-nav-btn.is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* ==========================================================================
   GROUPED NAV DROPDOWNS (_intel_nav.html + intel-nav.js)
   Desktop: hover / :focus-within / .is-open reveal an absolute menu.
   Mobile (<=720px, below): the same markup collapses to an accordion.
   ========================================================================== */
.intel-nav-group {
    position: relative;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}
.intel-nav-toggle {
    /* extends .intel-nav-btn; a real <button> so it needs no extra reset */
    cursor: pointer;
}
.intel-nav-toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.intel-nav-caret {
    font-size: 0.7em;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: var(--gold-light);
}
.intel-nav-group:hover .intel-nav-caret,
.intel-nav-group:focus-within .intel-nav-caret,
.intel-nav-group.is-open .intel-nav-caret {
    transform: rotate(180deg);
}
.intel-nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 230px;
    max-width: 320px;
    padding: 8px;
    background: rgba(14, 3, 3, 0.98);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
    /* Long dropdowns (e.g. the 11-item Database group) must never grow past the
       viewport into the fixed bottom-nav band on short screens — cap the height
       and scroll internally. The mobile @media block below overrides max-height/
       overflow for the in-flow accordion, so this only affects the desktop
       absolute menu. */
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
/* Invisible hover bridge spanning the 6px gap between the toggle and the menu,
   so moving the cursor down from the button into the menu never crosses an
   un-hovered region that would close the dropdown (hover-intent gap fix).

   It MUST live on the non-clipped parent .intel-nav-group, NOT on the menu:
   .intel-nav-menu now has overflow-y:auto (so long lists scroll), which clips
   any child positioned outside its content box — the old .intel-nav-menu::before
   at top:-10px was clipped away, re-opening the gap and dropping :hover as the
   cursor crossed it. The group has position:relative and no overflow clip, so a
   bridge here is never clipped. It only renders while the group is already
   hovered/open (so it can't stray-open the menu), and top:100%+height:10px covers
   the 6px gap and overlaps the menu top — no un-hovered region in between. */
.intel-nav-group:hover::after,
.intel-nav-group:focus-within::after,
.intel-nav-group.is-open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}
.intel-nav-group:hover .intel-nav-menu,
.intel-nav-group:focus-within .intel-nav-menu,
.intel-nav-group.is-open .intel-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.intel-nav-menuitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    color: #cbb99b;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    transition: background 0.18s ease, color 0.18s ease;
}
.intel-nav-menuitem i { color: var(--gold-light); flex-shrink: 0; width: 1.1em; text-align: center; }
.intel-nav-menuitem-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-nav-menuitem-count {
    flex-shrink: 0;
    font-size: 0.78em;
    font-weight: 700;
    color: #8f7f68;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 7px;
    border-radius: 999px;
}
.intel-nav-menuitem:hover,
.intel-nav-menuitem:focus-visible {
    background: rgba(255, 69, 0, 0.16);
    color: #fff;
    outline: none;
}
.intel-nav-menuitem:hover i,
.intel-nav-menuitem:focus-visible i { color: var(--fire-yellow); }
.intel-nav-menuitem.is-active {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.32), rgba(255, 69, 0, 0.18));
    color: #fff;
}
.intel-nav-menuitem.is-active i { color: var(--fire-yellow); }
.intel-nav-menuitem.is-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ==========================================================================
   HUB SECTION GRID (landing cards)
   ========================================================================== */
/* Grouped hub sections (hub.html renders one per nav group). Each group carries
   its own accent via --grp-a (hex) + --grp-rgb / --grp-rgb2 (r,g,b triplets, so
   they can be alpha-composited). A sensible gold fallback lives on the base rule
   so a card still themes correctly if a group class is ever missing. */
.intel-hub-group {
    --grp-a: #ffb347;
    --grp-rgb: 255, 179, 71;
    --grp-rgb2: 255, 110, 40;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 34px;
    min-width: 0;
}
.intel-hub-group--pals     { --grp-a: #ffbf5c; --grp-rgb: 255, 191, 92;  --grp-rgb2: 255, 122, 26; }
.intel-hub-group--database { --grp-a: #58acff; --grp-rgb: 88, 172, 255;  --grp-rgb2: 45, 108, 255; }
.intel-hub-group--skills   { --grp-a: #c07bff; --grp-rgb: 192, 123, 255; --grp-rgb2: 122, 60, 255; }
.intel-hub-group--maps     { --grp-a: #35dcac; --grp-rgb: 53, 220, 172;  --grp-rgb2: 18, 163, 122; }
.intel-hub-group--breeding { --grp-a: #ff7bb5; --grp-rgb: 255, 123, 181; --grp-rgb2: 255, 61, 127; }
.intel-hub-group--tools    { --grp-a: #ffa564; --grp-rgb: 255, 165, 100; --grp-rgb2: 255, 94, 58; }

.intel-hub-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 16px;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ece0cb;
    border-bottom: 1px solid rgba(var(--grp-rgb), 0.28);
    padding-bottom: 10px;
    min-width: 0;
    overflow: hidden;
}
.intel-hub-group-badge {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.95rem;
    color: var(--grp-a);
    background: linear-gradient(150deg, rgba(var(--grp-rgb), 0.28), rgba(var(--grp-rgb2), 0.12));
    border: 1px solid rgba(var(--grp-rgb), 0.45);
    box-shadow: 0 0 14px rgba(var(--grp-rgb), 0.25);
}
.intel-hub-group-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-hub-group-count {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--grp-a);
    background: rgba(var(--grp-rgb), 0.12);
    border: 1px solid rgba(var(--grp-rgb), 0.35);
    border-radius: 999px;
    padding: 2px 10px;
    letter-spacing: 0.02em;
}
.intel-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}
.intel-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 16px;
    text-decoration: none;
    color: #f1e6d2;
    border: 1px solid var(--glass-border);
    background:
        linear-gradient(180deg, rgba(20, 6, 3, 0.9), rgba(12, 3, 2, 0.82)),
        radial-gradient(circle at top left, rgba(var(--grp-rgb), 0.1), transparent 46%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    min-width: 0;
    overflow: hidden;
}
.intel-hub-card:hover,
.intel-hub-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(var(--grp-rgb), 0.75);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--grp-rgb), 0.32);
}
.intel-hub-card:focus-visible { outline: 2px solid var(--grp-a); outline-offset: 2px; }
.intel-hub-card.is-disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.72;
}

/* Media strip — leads every card. Holds either the representative artwork
   (contained render / covered landscape) or a large accent glyph fallback. */
.intel-hub-card-media {
    position: relative;
    height: 122px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(var(--grp-rgb), 0.3);
    background:
        radial-gradient(circle at 30% 22%, rgba(var(--grp-rgb), 0.32), transparent 62%),
        linear-gradient(150deg, rgba(var(--grp-rgb), 0.2), rgba(var(--grp-rgb2), 0.06) 70%),
        rgba(0, 0, 0, 0.28);
}
.intel-hub-card-img {
    max-width: 76%;
    max-height: 92px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
    transition: transform 0.22s ease;
}
.intel-hub-card-media.is-cover { border-bottom-color: rgba(var(--grp-rgb), 0.45); }
.intel-hub-card-media.is-cover .intel-hub-card-img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) brightness(0.94);
}
.intel-hub-card-media.is-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(8, 4, 2, 0.55));
    pointer-events: none;
}
.intel-hub-card-glyph {
    font-size: 2.6rem;
    color: var(--grp-a);
    text-shadow: 0 0 18px rgba(var(--grp-rgb), 0.55);
}
/* Small themed corner tag echoing the section's FontAwesome icon (image cards) */
.intel-hub-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--grp-a);
    background: rgba(6, 3, 2, 0.72);
    border: 1px solid rgba(var(--grp-rgb), 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.intel-hub-card:hover .intel-hub-card-img { transform: scale(1.05); }

/* Text body below the media strip */
.intel-hub-card-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 18px 18px;
    flex: 1 1 auto;
    min-width: 0;
}
.intel-hub-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--grp-a);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-hub-card:hover .intel-hub-card-title { color: #fff; }

/* Static reference-data count badge ("282 Pals", "2,474 items", ...) */
.intel-hub-card-count {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--grp-a);
    background: rgba(var(--grp-rgb), 0.13);
    border: 1px solid rgba(var(--grp-rgb), 0.4);
    border-radius: 999px;
    padding: 3px 10px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-hub-card-count i { font-size: 0.85em; }
.intel-hub-card-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(240, 224, 196, 0.72);
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.intel-hub-card-cta {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grp-a);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}
.intel-hub-card-cta i { font-size: 0.8em; }
.intel-hub-card:hover .intel-hub-card-cta { gap: 10px; color: #fff; }

/* Sub-tool chips on the featured card ("Calculator · Reverse · Tree") */
.intel-hub-card-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.intel-hub-chip {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    color: #f1e6d2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.intel-hub-card:hover .intel-hub-chip {
    border-color: rgba(var(--grp-rgb), 0.7);
    color: #fff;
}
.intel-hub-chip-sep { display: none; }

/* Featured card (Breeding) — asymmetric 2-column hero tile instead of a
   fifth identical tile. Spec §7: "2-column span, larger, sub-chips". */
.intel-hub-card--featured {
    grid-column: span 2;
    border-color: rgba(var(--grp-rgb), 0.5);
    background:
        linear-gradient(180deg, rgba(30, 8, 18, 0.9), rgba(16, 3, 9, 0.8)),
        radial-gradient(circle at top left, rgba(var(--grp-rgb), 0.24), transparent 58%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48), 0 0 26px rgba(var(--grp-rgb), 0.18);
}
.intel-hub-card--featured .intel-hub-card-media { height: 156px; }
.intel-hub-card--featured .intel-hub-card-img { max-height: 124px; max-width: 60%; }
.intel-hub-card--featured .intel-hub-card-glyph { font-size: 3.4rem; }
.intel-hub-card--featured .intel-hub-card-body { padding: 20px 24px 22px; gap: 12px; }
.intel-hub-card--featured .intel-hub-card-title {
    font-size: 1.5rem;
    white-space: normal;
}
.intel-hub-card--featured .intel-hub-card-desc {
    font-size: 1rem;
    -webkit-line-clamp: 2;
}

/* "Coming soon" chip in the top-right of a not-yet-ready card */
.intel-soon-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--intel-tag-new);
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.4);
}

/* ==========================================================================
   GENERIC GLASS PANEL (reused by placeholder + future library pages)
   ========================================================================== */
.intel-panel {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.15), rgba(150, 0, 0, 0.35));
    background-size: 200% 200%;
    animation: t7-gradientMove 8s ease infinite;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 69, 0, 0.4);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 69, 0, 0.1);
    min-width: 0;
    overflow: hidden;
}

/* Coming-soon placeholder body */
.intel-coming-soon {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 40px 20px;
}
.intel-coming-soon-icon {
    font-size: 4.5rem;
    color: var(--fire-orange);
    text-shadow: 0 0 24px rgba(255, 69, 0, 0.5);
}
.intel-coming-soon h2 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.3rem);
    color: #fff;
    text-shadow: 0 0 15px var(--fire-orange);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.intel-coming-soon p {
    margin: 0 auto;
    max-width: 520px;
    color: rgba(240, 224, 196, 0.82);
    font-size: 1rem;
    line-height: 1.55;
}
.intel-coming-soon-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(45deg, var(--fire-red), var(--fire-orange), var(--fire-yellow));
    background-size: 200% 200%;
    animation: t7-gradientMove 3s ease infinite;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    transition: transform 0.2s;
}
.intel-coming-soon-back:hover { transform: scale(1.04); color: #fff; }

/* Respect reduced-motion: keep the accent recolour/glow on hover but drop the
   lift + image zoom so nothing translates for motion-sensitive users. */
@media (prefers-reduced-motion: reduce) {
    .intel-hub-card,
    .intel-hub-card-img,
    .intel-hub-card-cta { transition: none; }
    .intel-hub-card:hover,
    .intel-hub-card:focus-visible { transform: none; }
    .intel-hub-card:hover .intel-hub-card-img { transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 720px) {
    .intel-container { padding: 14px; }

    /* Narrower column = the SAME blurb wraps to roughly twice as many lines, so
       the runaway-guard cap has to scale with it or the clamp starts cutting
       real copy (see the .intel-header p note above). 12 clears the longest
       authored blurb at 390px (10 lines) with headroom for 360px.
       The step down in type size buys back most of the height the un-cut text
       costs (measured: /stats header 301px -> 254px at 390px) and keeps the
       description subordinate to the h1, which is the right hierarchy on a
       phone anyway. */
    .intel-header p {
        -webkit-line-clamp: 12;
        line-clamp: 12;
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .intel-hub-grid { grid-template-columns: 1fr; }
    /* Force the featured tile's span to collapse to the single mobile
       column — without this, `grid-column: span 2` against a 1-column
       explicit grid creates an empty implicit second column and the card
       overflows the viewport horizontally. */
    .intel-hub-card--featured { grid-column: 1 / -1; }
    .intel-nav-btn { padding: 9px 14px; font-size: 0.85em; }

    /* Mobile: the nav stacks and each dropdown becomes an accordion driven by
       .is-open (set by intel-nav.js) — no hover on touch. Same markup; only the
       menu positioning + reveal mechanism change. The nav never scrolls
       horizontally: groups are full-width and menus flow inline. */
    .intel-nav {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
    }
    .intel-nav-group {
        display: block;
        width: 100%;
    }
    /* No hover bridge on touch: the menu is an in-flow accordion here, so the
       desktop gap bridge (an absolute transparent strip) would only sit over the
       accordion and could intercept taps. Disable it. */
    .intel-nav-group:hover::after,
    .intel-nav-group:focus-within::after,
    .intel-nav-group.is-open::after {
        content: none;
    }
    .intel-nav-group > .intel-nav-toggle {
        width: 100%;
        justify-content: flex-start;
    }
    .intel-nav-caret { margin-left: auto; }
    .intel-nav-menu {
        position: static;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        margin-top: 4px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        transition: max-height 0.28s ease, padding 0.28s ease;
    }
    /* On touch, only an explicit tap (.is-open) expands — neutralize the
       desktop hover/focus-within reveal so menus don't spring open on scroll. */
    .intel-nav-group:hover .intel-nav-menu,
    .intel-nav-group:focus-within .intel-nav-menu {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .intel-nav-group.is-open .intel-nav-menu,
    .intel-nav-group:focus-within.is-open .intel-nav-menu {
        /* Headroom, not a snug fit. This is the accordion's ONLY height limit,
           so anything past it is silently clipped and unreachable — the failure
           mode is invisible in review and only shows up once a group grows.
           Largest group today is Database at 12 items; at the 44px touch target
           below that is 12*44 + 16 = 544px, which left only 96px of slack under
           the previous 640px cap (~2 more entries). Sized so the cap cannot
           realistically bind; the eased transition is unchanged in feel because
           max-height only ever animates to the menu's own content height. */
        max-height: 1200px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Touch targets. Measured on the live site with the accordion fully open
       (measuring mid-transition reports a squashed 18px and is misleading):
       dropdown items were 33px and two top-level buttons 37px. That clears the
       WCAG 2.5.8 minimum of 24px but sits under the 44px recommended by Apple
       HIG / this repo's mobile rule — and these 32 links ARE the wiki's primary
       navigation on a phone, stacked vertically, where a mis-tap lands the user
       in a completely different section. Padding alone can't do this without
       distorting the text block, so set the floor explicitly; both elements are
       already flex + align-items:center, so the label stays centred. */
    .intel-nav-btn { min-height: 44px; }
    .intel-nav-menuitem { min-height: 44px; }
}

/* ==========================================================================
   UNIFIED WIKI SEARCH (_intel_nav.html + intel-search.js)
   A persistent search bar under the nav on EVERY wiki page. "This page" scope
   drives the on-page IntelTable filter (or highlights text on non-table pages);
   "All wiki" scope shows a ranked dropdown of jump links from search_index.json.
   Ranked just BELOW the grouped nav (--intel-search-z < --intel-nav-z) so that
   when a nav dropdown is open it wins the overlap. The results panel still paints
   over page content (the content column is not a stacking context), and the two
   are generally never open at once.
   ========================================================================== */
.intel-search {
    position: relative;
    /* One stacking context just above the site bottom-nav and BELOW the grouped
       nav (--intel-nav-z) so an open dropdown paints over — and keeps hover over —
       this bar. Still below the site drawer (1088) / ticker (1100). The results
       panel below stays over page content (auto z-index). See --intel-search-z. */
    z-index: var(--intel-search-z);
    margin: -14px 0 28px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.intel-search-bar {
    display: flex;
    gap: 10px;
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto;
    min-width: 0;
}
.intel-search-field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    background: rgba(10, 0, 0, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.intel-search-field:focus-within {
    border-color: var(--fire-orange);
    box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.18);
}
.intel-search-icon { color: var(--gold-light); flex-shrink: 0; font-size: 0.95em; }
.intel-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #f1e6d2;
    font-family: inherit;
    font-size: 0.95em;
    padding: 12px 8px;
    -webkit-appearance: none;
    appearance: none;
}
.intel-search-input::placeholder { color: #8f7f68; }
/* Kill the native search "x" so only our clear button shows. */
.intel-search-input::-webkit-search-decoration,
.intel-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.intel-search-clear {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #a5937a;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.18s ease, background 0.18s ease;
}
.intel-search-clear:hover { color: #fff; background: rgba(255, 69, 0, 0.14); }

/* ---- Global results dropdown ---- */
.intel-search-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    background: rgba(14, 3, 3, 0.98);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
    min-width: 0;
}
.intel-search-panel[hidden] { display: none; }
.intel-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    text-decoration: none;
    color: #d8c8ac;
    min-width: 0;
    overflow: hidden;
    transition: background 0.14s ease, color 0.14s ease;
}
.intel-search-result:hover,
.intel-search-result.is-active {
    background: rgba(255, 69, 0, 0.16);
    color: #fff;
    outline: none;
}
.intel-search-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.92em;
}
.intel-search-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.intel-search-subtitle {
    overflow: hidden;
    color: #9f9079;
    font-size: .72em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-search-namehit {
    background: transparent;
    color: var(--fire-yellow);
    font-weight: 800;
}
.intel-search-badge {
    flex-shrink: 0;
    font-size: 0.66em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #cbb99b;
    min-width: 46px;
    text-align: center;
}
.intel-search-badge--pal   { color: #ffbf5c; border-color: rgba(255, 191, 92, 0.45); background: rgba(255, 191, 92, 0.12); }
.intel-search-badge--item  { color: #58acff; border-color: rgba(88, 172, 255, 0.45); background: rgba(88, 172, 255, 0.12); }
.intel-search-badge--skill { color: #c07bff; border-color: rgba(192, 123, 255, 0.45); background: rgba(192, 123, 255, 0.12); }
.intel-search-badge--page  { color: #35dcac; border-color: rgba(53, 220, 172, 0.45); background: rgba(53, 220, 172, 0.12); }
.intel-search-badge--catalog { color: #ff8ac9; border-color: rgba(255, 138, 201, .45); background: rgba(255, 138, 201, .12); }
.intel-search-empty {
    padding: 14px 12px;
    color: #b7a88a;
    font-size: 0.9em;
    line-height: 1.5;
}
.intel-search-status {
    max-width: 900px;
    margin: 6px auto 0;
    padding: 0 4px;
    font-size: 0.8em;
    color: #8f7f68;
    min-height: 1em;
    min-width: 0;
}

@media (max-width: 720px) {
    .intel-search { margin: -6px 0 22px; }
    .intel-search-bar { flex-direction: column; gap: 8px; }
}