/* ═══════════════════════════════════════════════════
   SCOPE BRAND SYSTEM — Logo-O Treatment + Nav Logos
   Include on every page: <link rel="stylesheet" href="/scope-brand.css">
   ═══════════════════════════════════════════════════ */

/* Nav logo icons (32x32 next to product names) */
.nav-logo-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Larger logo icon for headers/heroes */
.brand-logo-lg {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Product name with inline logo */
.product-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.product-name img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
}

/* ═══════════════════════════════════════════════════
   SCOPE LOGO-O TREATMENT
   Usage: <span class="scope-word">Sc<span class="scope-o"></span>pe</span>
   The O is replaced with the circular bird-eye logo
   ═══════════════════════════════════════════════════ */
.scope-word {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.scope-o {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    background-image: url('/icons/brand/blackbird-scope-64x64.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin: 0 -0.02em;
    /* Lighter ring around the O */
    box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.25),
                0 0 8px rgba(255, 90, 31, 0.15);
    position: relative;
}

/* Fallback: if the image doesn't load, show a styled O */
.scope-o::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 90, 31, 0.2);
    pointer-events: none;
}

/* Hover glow on the O */
.scope-word:hover .scope-o {
    box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.4),
                0 0 15px rgba(255, 90, 31, 0.3);
}

/* Larger variant for heroes/headers */
.scope-o-lg {
    width: 1em;
    height: 1em;
}

/* ═══════════════════════════════════════════════════
   TIER BADGES
   Usage: <span class="tier-badge tier-1">Scope Tier 1</span>
   ═══════════════════════════════════════════════════ */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Segoe UI', "Helvetica Neue", Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid;
}

.tier-badge.tier-1 {
    color: #00BFFF;
    border-color: rgba(0, 191, 255, 0.3);
    background: rgba(0, 191, 255, 0.08);
}

.tier-badge.tier-2 {
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.08);
}

.tier-badge.tier-3 {
    color: #ff6a1f;
    border-color: rgba(255, 90, 31, 0.3);
    background: rgba(255, 90, 31, 0.08);
    box-shadow: 0 0 10px rgba(255, 90, 31, 0.1);
}

/* Tier progress indicator */
.tier-progress {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.6rem;
    color: #606060;
}

.tier-progress-bar {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.tier-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s ease;
}

.tier-1 .tier-progress-fill {
    width: 35%;
    background: linear-gradient(90deg, #00BFFF, #0099cc);
    box-shadow: 0 0 6px rgba(0, 191, 255, 0.3);
}

.tier-2 .tier-progress-fill {
    width: 70%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.tier-3 .tier-progress-fill {
    width: 100%;
    background: linear-gradient(90deg, #ff6a1f, #FF8C00);
    box-shadow: 0 0 6px rgba(255, 90, 31, 0.3);
}

/* ═══════════════════════════════════════════════════
   CUSTOM SCROLLBAR — visible, coloured, easy to grab
   Applies to ALL scrollable elements sitewide
   ═══════════════════════════════════════════════════ */

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track {
    background: rgba(18, 18, 20, 0.6);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 90, 31, 0.8), rgba(204, 69, 24, 0.8));
    border-radius: 8px;
    border: 3px solid rgba(18, 18, 20, 0.6);
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 122, 63, 0.85), rgba(255, 90, 31, 0.85));
    box-shadow: 0 0 8px rgba(255, 90, 31, 0.3);
    border-color: transparent;
}

::-webkit-scrollbar-thumb:active {
    background: rgba(255, 140, 0, 0.8);
}

::-webkit-scrollbar-corner {
    background: rgba(18, 18, 20, 0.6);
}

/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: rgba(255, 90, 31, 0.8) rgba(18, 18, 20, 0.6);
}

/* Horizontal scrollbar (same treatment) */
::-webkit-scrollbar:horizontal {
    height: 15px;
}

/* ═══════════════════════════════════════════════════
   GLOBAL FIXES — applied across all pages via scope-brand.css
   ═══════════════════════════════════════════════════ */

/* Kill site-nav sidebars — but keep functional app sidebars (Workshop, etc) */
.page-layout > .sidebar {
    display: none !important;
}
.page-layout .main {
    margin-left: 0 !important;
}
/* Hide old mobile menus — replaced by bottom sheet */
.mobile-menu,
.mobile-nav {
    display: none !important;
}
/* Note: injected nav hidden via script removal from /html/ files */

/* Force consistent body background on every page — dalmatian ember splats on dark base */
body {
    background:
        radial-gradient(ellipse 25% 20% at 8% 5%, rgba(255, 94, 23, .035), transparent),
        radial-gradient(ellipse 20% 18% at 85% 8%, rgba(255, 70, 15, .025), transparent),
        radial-gradient(ellipse 22% 25% at 65% 55%, rgba(255, 90, 20, .02), transparent),
        radial-gradient(ellipse 18% 22% at 15% 75%, rgba(255, 106, 31, .025), transparent),
        radial-gradient(ellipse 20% 15% at 90% 85%, rgba(255, 60, 10, .02), transparent),
        linear-gradient(180deg, #07080b, #050608) !important;
}

/* Kill the phone-case rounded corners on .app shell */
.app {
    border-radius: 0 !important;
}

/* Kill the orange glow pseudo-elements that create weird arcs */
.app::before,
.app::after {
    display: none !important;
}

/* Fix nav bar — solid dark background, no content bleed-through */
.nav,
.nav-global,
.topbar {
    background: rgba(7, 8, 11, .98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Nav brand name — bigger, warmer */
.nav__logo,
.nav-global__logo,
.brand h1,
.sidebar-logo {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}

/* Nav links — system font, not typewriter */
.nav__links a,
.nav-global__links a,
.nav-links-top a,
.nav-link-top {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important;
}

/* KILL TYPEWRITER FONT EVERYWHERE — no Segoe UI on any visible text */
/* Only exception: code blocks and textareas for pasting transcripts */
.hero__kicker, .hero__stream, .hero__counter, .hero__proof, .hero-body,
.section__kicker, .section__sub,
.nav-link-top, .nav__links a, .nav-global__links a, .nav-links-top a,
.et-label, .et-label *,
.featured-card__tag, .featured-card__link,
.research-card__meta, .research-card__name,
.interactive-card__tag, .interactive-card__name,
.tool-cell__name, .tool-cell__link,
.sector-card__lens-tag, .sector-card__tab-link,
.pill, .pill-btn, .pill-row *,
.tab, .tab *,
.btn, .btn-primary, .btn-outline, .btn-ghost,
.stats__label, .stats__number,
.cmd-card__links a, .dash-card__links a,
.intel-card__title, .intel-card__link,
.footer__links a, .footer__ico, .footer__copy,
.callout__disclaimer,
.hero__badge, .hero__stat-label,
.hero__sectors .hero__sector,
.tier-badge, .tier-progress,
.try-box__label, .try-box__count,
.app-footer-text, .app-footer-text *,
.deliverable__title,
.method-card__code, .method-card__name,
.mcode-num,
.sig-label,
.sev-card dt,
.hm-btn,
label,
.controls *, .search-count,
.evg-ex, .evg-note, .evg-btn,
.ets-text, .ets-go, .ets-dismiss,
.sector-card__link, .sector-card__name,
.sector-card__desc, .sector-card *,
.research-card *, .interactive-card *,
.featured-card *, .featured-card__tag,
.callout *, .cmd-card *, .intel-card *,
.tool-table *, .tool-table th, .tool-table td,
.tier-card *, .gap-card *, .deliverable *,
.wf-step *, .method-card * {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* Bump small card text sizes */
.sector-card__desc,
.research-card__desc,
.featured-card__text {
    font-size: .88rem !important;
    line-height: 1.7 !important;
}
.sector-card__link,
.research-card__meta,
.featured-card__link {
    font-size: .78rem !important;
    font-weight: 700 !important;
}

/* Unified chat action buttons — mic, file, send all same hover/press */
.ib, .bs {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.ib:hover, .bs:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 94, 13, .25) !important;
    filter: brightness(1.1) !important;
}
.ib:active, .bs:active {
    transform: translateY(1px) scale(0.96) !important;
    box-shadow: 0 2px 6px rgba(255, 94, 13, .15) !important;
    filter: brightness(0.95) !important;
}

/* Injected hamburger menu button */
.et-injected-hamburger {
    background: none;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s;
    margin-left: auto;
    flex-shrink: 0;
}
.et-injected-hamburger:hover {
    border-color: rgba(255, 106, 31, .4);
}
.et-floating-menu {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9980;
    background: rgba(10, 10, 14, .9) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════
   LOGO FIX — strip sticker frames via JS on load
   CSS !important can't override inline styles, so this
   runs on DOMContentLoaded to force-remove border-radius
   from all brand logo images sitewide.
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   GLOBAL SELECT/DROPDOWN — dark bg, readable text, no grey
   Applied to ALL dropdowns on ALL pages via scope-brand.css
   ═══════════════════════════════════════════════════ */
select {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-size: .9rem !important;
    color: #f3efe9 !important;
    background: #0a0c12 !important;
    border: 1px solid rgba(255, 106, 31, .2) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    cursor: pointer;
    outline: none;
    min-width: 120px;
}
select:focus {
    border-color: rgba(255, 106, 31, .5) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 31, .1) !important;
}
select option {
    background: #0a0c12 !important;
    color: #f3efe9 !important;
    padding: 10px !important;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-size: .9rem !important;
}

/* KILL ALL MONOSPACE/TYPEWRITER on textareas and inputs */
textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"] {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* KILL monospace on ALL labels, kickers, and small text */
.ctx-label, .zone-label, .section-label, .panel-title,
.context-selects label, .ctx-group label,
.tier-badge, .tier-progress,
.msg-a__mt, .msg-a__r,
.chat-input__lbl {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: .02em !important;
}

/* ═══════════════════════════════════════════════════
   EMBER DUST — random scattered particles on every page
   Subtle orange/amber dots floating on dark background
   Applied via body::before pseudo-element
   ═══════════════════════════════════════════════════ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 12% 10% at 12% 15%, rgba(255, 94, 23, .03), transparent),
        radial-gradient(ellipse 8% 12% at 78% 10%, rgba(255, 70, 20, .025), transparent),
        radial-gradient(ellipse 15% 8% at 45% 30%, rgba(255, 106, 31, .02), transparent),
        radial-gradient(ellipse 10% 14% at 88% 40%, rgba(255, 80, 25, .03), transparent),
        radial-gradient(ellipse 12% 10% at 22% 52%, rgba(255, 60, 15, .025), transparent),
        radial-gradient(ellipse 8% 10% at 70% 60%, rgba(255, 90, 31, .02), transparent),
        radial-gradient(ellipse 14% 12% at 35% 75%, rgba(255, 106, 31, .025), transparent),
        radial-gradient(ellipse 10% 8% at 82% 78%, rgba(255, 50, 10, .03), transparent),
        radial-gradient(ellipse 12% 15% at 55% 90%, rgba(255, 94, 23, .02), transparent),
        radial-gradient(ellipse 8% 10% at 8% 88%, rgba(255, 70, 20, .025), transparent);
    animation: emberDrift 50s ease-in-out infinite alternate;
}

@keyframes emberDrift {
    0% { opacity: .15; transform: translateY(0) scale(1); }
    50% { opacity: .25; transform: translateY(-6px) scale(1.02); }
    100% { opacity: .15; transform: translateY(0) scale(1); }
}

/* Ensure all page content sits above the ember dust */
body > * {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════
   AMBIENT GRADIENT DRIFT
   Subtle background animation for hero/section areas
   Usage: add class "ambient-glow" to any section
   ═══════════════════════════════════════════════════ */
.ambient-glow {
    position: relative;
}
.ambient-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 25% 40%, rgba(255, 94, 23, .06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 75% 30%, rgba(59, 130, 246, .04) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 90%, rgba(255, 94, 23, .03) 0%, transparent 50%);
    animation: ambientDrift 25s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
@keyframes ambientDrift {
    0%   { opacity: .5; transform: scale(1) translateX(0); }
    33%  { opacity: .8; transform: scale(1.04) translateX(8px); }
    66%  { opacity: .6; transform: scale(1.02) translateX(-5px); }
    100% { opacity: .5; transform: scale(1) translateX(0); }
}

/* ═══════════════════════════════════════════════════
   SCORE RING — CSS Custom Property Animation
   Usage: <div class="score-ring" style="--score: 72; --ring-color: #ff6a1f">
   ═══════════════════════════════════════════════════ */
@property --score-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.score-ring {
    --score: 0;
    --ring-color: #ff6a1f;
    --ring-size: 80px;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(
        var(--ring-color) var(--score-angle),
        rgba(255, 255, 255, .06) var(--score-angle)
    );
    animation: scoreRingFill 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
    position: relative;
    filter: drop-shadow(0 0 20px rgba(255, 106, 31, .16));
}
.score-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #0a0c12;
}
@keyframes scoreRingFill {
    from { --score-angle: 0deg; }
    to   { --score-angle: calc(var(--score) * 3.6deg); }
}

/* ═══════════════════════════════════════════════════
   INPUT SHIMMER — Streaming/processing state
   Usage: add class "input-shimmer" to textarea/input
   ═══════════════════════════════════════════════════ */
.input-shimmer {
    position: relative;
    overflow: hidden;
}
.input-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 106, 31, .06) 30%,
        rgba(255, 106, 31, .12) 50%,
        rgba(255, 106, 31, .06) 70%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: inputShimmer 2s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes inputShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Focus glow enhancement for all inputs */
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus {
    border-color: rgba(255, 106, 31, .4) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 31, .08), 0 0 20px rgba(255, 106, 31, .06) !important;
    transition: border-color .3s, box-shadow .3s !important;
}

/* ═══════════════════════════════════════════════════
   LOGO BLEND — Makes logos blend into backgrounds
   instead of looking like stickers with black squares
   ═══════════════════════════════════════════════════ */
.brand-logo-lg,
.nav-logo-icon,
img[src*="et-brand-logo"],
img[src*="blackbird-scope-new"],
img[src*="blackbird-scope-64"],
img[src*="birds-eye-scope"],
img[src*="guardian-new"],
img[src*="boardroom-new"],
img[src*="workshop-new"],
img[src*="vault-new"],
img[src*="shield-new"],
img[src*="synergy-flow-new"],
img[src*="toolbox-master-new"] {
    mix-blend-mode: lighten;
    border-radius: 0 !important;
    background: transparent !important;
    filter: drop-shadow(0 0 8px rgba(255, 106, 31, .15)) !important;
    box-shadow: none !important;
}
/* Kill any container backgrounds around logos */
.hero__logo-row, .hero__logos, .ext-logos,
[class*="logo-wrap"], [class*="logo-container"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════
   BRAND COLOURS (reference)
   ═══════════════════════════════════════════════════
   Matte Black:   #07080b
   Ember Orange:  #ff6a1f
   Crimson Red:   #E03131
   ═══════════════════════════════════════════════════ */