@import '_content/BridgeUI/BridgeUI.mruizzbh1t.bundle.scp.css';

/* /Components/OpenModel.razor.rz.scp.css */
/* Eagle Eye Prism — opening page.

   Ported from the Claude Design prototype. The prototype's inline styles are
   folded into classes here; values, keyframe timings and the palette are
   unchanged.

   This page does NOT use the app's Fluent tokens (css/startup.css). It carries
   its own palette on [data-theme] at the root, so nothing leaks either way.
   Font faces live in wwwroot/css/geist.css — @font-face cannot be scoped. */

.eev[b-3y47nmobn4] {
    --sans: "Geist", system-ui, -apple-system, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --h-bg: #0a0b0d;
    --h-fg: #e8ebef;
    --h-card: #0e1014;
    --h-border: #1b1f25;
    --h-dim: #8a9099;
    --h-chip-bg: #12161d;
    --h-chip-bd: #242a33;
    --h-chip-fg: #cfe0ff;
    --h-nav: rgba(10, 11, 13, .72);
    --h-accent: #2a7b8c;
    --h-accent-2: #3593a8;
    --h-bad: #d05a5a;
    --h-good: #5ab07a;
    --shadow: 0 8px 28px rgba(0, 0, 0, .45);

    /* The prototype sits in normal document flow; here it has to cover the app
       shell, and the sticky header needs a scroll container of its own. */
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--h-bg);
    color: var(--h-fg);
    font-family: var(--sans);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;

    /* Lets the UA paint scrollbars and any native control to match. "system"
       says "either", so the OS setting decides without JS. */
    color-scheme: dark;
}

.eev[data-theme="system"][b-3y47nmobn4] { color-scheme: light dark; }
.eev[data-theme="light"][b-3y47nmobn4] { color-scheme: light; }

.eev[data-theme="light"][b-3y47nmobn4] {
    --h-bg: #f5f6f8;
    --h-fg: #0d1117;
    --h-card: #ffffff;
    --h-border: #e4e8ed;
    --h-dim: #5f666e;
    --h-chip-bg: #eef3ff;
    --h-chip-bd: #d9dee5;
    --h-chip-fg: #2f5bb0;
    --h-nav: rgba(245, 246, 248, .82);
    --h-bad: #d0453f;
    --h-good: #2e9e5b;
    --shadow: 0 8px 28px rgba(20, 30, 50, .15);
}

/* data-theme="system" — the DEFAULT — follows the OS.

   Dark needs no rule: it is the base palette on .eev above, so only the light
   case has to be restated. The block is a duplicate of [data-theme="light"] and
   has to be: a selector list cannot straddle a media query, and there is no way
   to alias one token set to another in CSS. Keep the two in sync. */
@media (prefers-color-scheme: light) {
    .eev[data-theme="system"][b-3y47nmobn4] {
        --h-bg: #f5f6f8;
        --h-fg: #0d1117;
        --h-card: #ffffff;
        --h-border: #e4e8ed;
        --h-dim: #5f666e;
        --h-chip-bg: #eef3ff;
        --h-chip-bd: #d9dee5;
        --h-chip-fg: #2f5bb0;
        --h-nav: rgba(245, 246, 248, .82);
        --h-bad: #d0453f;
        --h-good: #2e9e5b;
        --shadow: 0 8px 28px rgba(20, 30, 50, .15);
    }
}

.eev *[b-3y47nmobn4], .eev *[b-3y47nmobn4]::before, .eev *[b-3y47nmobn4]::after { box-sizing: border-box; }

/* ============================== NAV ============================== */

.eev-nav[b-3y47nmobn4] {
    position: sticky;
    top: 0;
    z-index: 30;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--h-nav);
    border-bottom: 1px solid var(--h-border);
}

.eev-nav-in[b-3y47nmobn4] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.eev-brand[b-3y47nmobn4] { display: flex; align-items: center; gap: 10px; }
.eev-mark[b-3y47nmobn4] { display: flex; color: var(--h-accent); }
.eev-brand-name[b-3y47nmobn4] { font-weight: 700; letter-spacing: .08em; font-size: 14px; }
.eev-brand-sub[b-3y47nmobn4] { font-size: 10px; letter-spacing: .14em; color: var(--h-dim); }

.eev-links[b-3y47nmobn4] { display: flex; gap: 22px; margin-left: auto; }
.eev-links a[b-3y47nmobn4] { color: var(--h-dim); text-decoration: none; font-size: 14px; }
.eev-links a:hover[b-3y47nmobn4] { color: var(--h-fg); }

.eev-nav-actions[b-3y47nmobn4] { display: flex; align-items: center; gap: 10px; margin-left: 20px; }

.eev-theme[b-3y47nmobn4] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--h-card);
    border: 1px solid var(--h-border);
    color: var(--h-fg);
    cursor: pointer;
}

.eev-back[b-3y47nmobn4] {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--h-fg);
    background: var(--h-card);
    border: 1px solid var(--h-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
}

.eev-theme:hover[b-3y47nmobn4], .eev-back:hover:not(:disabled)[b-3y47nmobn4] { border-color: var(--h-accent); }

/* Cache-buster (see the button's comment in OpenModel.razor). Carries the accent
   outline in its resting state rather than sitting flat like .eev-back: it is the
   answer to "the page looks wrong / my fix isn't there", so it has to read as an
   action, not as chrome. */
.eev-update[b-3y47nmobn4] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--h-accent-2);
    background: color-mix(in srgb, var(--h-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--h-accent) 45%, transparent);
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.eev-update:hover:not(:disabled)[b-3y47nmobn4] {
    color: #fff;
    background: var(--h-accent);
    border-color: var(--h-accent);
}

.eev-update:disabled[b-3y47nmobn4] { opacity: .55; cursor: default; }

/* An update really is waiting. Filled rather than outlined, and it pulses once a
   second or so — this is the one state a user must not scroll past, because the
   build they are looking at is not the build that is deployed. */
.eev-update.is-ready[b-3y47nmobn4] {
    color: #fff;
    background: var(--h-accent);
    border-color: var(--h-accent);
    animation: eev-update-pulse-b-3y47nmobn4 2.4s ease-in-out infinite;
}

.eev-update.is-ready:hover:not(:disabled)[b-3y47nmobn4] { background: var(--h-accent-2); border-color: var(--h-accent-2); }

@keyframes eev-update-pulse-b-3y47nmobn4 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--h-accent) 55%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--h-accent) 0%, transparent); }
}

/* Reuses the loader's keyframes but not .eev-spin itself, which also sets an
   accent colour — wrong inside a filled accent button. */
.eev-update-spin[b-3y47nmobn4] { animation: eev-spin-b-3y47nmobn4 1.1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .eev-update.is-ready[b-3y47nmobn4] { animation: none; }
    .eev-update-spin[b-3y47nmobn4] { animation: none; }
}

/* ============================= LAYOUT ============================ */

.eev-main[b-3y47nmobn4] { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.eev-hero[b-3y47nmobn4] {
    padding: 70px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.eev-badge[b-3y47nmobn4] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--h-chip-fg);
    background: var(--h-chip-bg);
    border: 1px solid var(--h-chip-bd);
    border-radius: 999px;
    padding: 6px 14px;
}

.eev-h1[b-3y47nmobn4] {
    margin: 20px 0 0;
    font-size: 52px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.025em;
    max-width: 780px;
    text-wrap: balance;
}

.eev-lede[b-3y47nmobn4] {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--h-dim);
    max-width: 620px;
}

/* ============================ DROP ZONE ========================== */

.eev-drop[b-3y47nmobn4] {
    position: relative;
    margin: 32px 0 8px;
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 28px;
    border: 1.5px dashed var(--h-border);
    border-radius: 16px;
    background: var(--h-card);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.eev-drop:hover[b-3y47nmobn4] { border-color: var(--h-accent); }

/* While a model opens the opening card takes the zone's place on screen — but
   the input has to stay in the DOM for the read to complete (see OpenModel.razor).
   Hidden, not unmounted. */
.eev-drop.is-hidden[b-3y47nmobn4] { display: none; }

/* Highlight overlay while a file is dragged over the zone. */
.eev-drop-glow[b-3y47nmobn4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1.5px solid var(--h-accent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--h-accent) 8%, transparent);
}

/* The real <input type="file">, stretched over the zone. Invisible but fully
   hit-testable, which is what makes the browser's own drop handling work. */
.eev[b-3y47nmobn4]  input[type="file"].eev-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Everything else in the zone is decoration: keeping it out of hit-testing
   leaves the input as the single drag target, so dragging across the icon or
   the caption cannot fire a spurious dragleave. */
.eev-drop-icon[b-3y47nmobn4], .eev-drop-title[b-3y47nmobn4], .eev-drop-sub[b-3y47nmobn4], .eev-drop-hint[b-3y47nmobn4] { pointer-events: none; }

.eev-drop-icon[b-3y47nmobn4] { color: var(--h-accent); }
.eev-drop-title[b-3y47nmobn4] { font-size: 18px; font-weight: 600; }
.eev-drop-sub[b-3y47nmobn4] { font-size: 13px; color: var(--h-dim); }
.eev-drop-hint[b-3y47nmobn4] { font-size: 12px; color: var(--h-dim); opacity: .85; margin-top: 2px; }

/* ========================== OPENING CARD ========================= */

.eev-open[b-3y47nmobn4] {
    position: relative;
    margin: 32px 0 8px;
    width: 100%;
    max-width: 620px;
    text-align: left;
    border: 1px solid var(--h-border);
    border-radius: 16px;
    background: var(--h-card);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.eev-open-head[b-3y47nmobn4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--h-border);
}

.eev-spin[b-3y47nmobn4] { flex: 0 0 16px; color: var(--h-accent); animation: eev-spin-b-3y47nmobn4 1.1s linear infinite; }

.eev-open-file[b-3y47nmobn4] {
    font-family: var(--mono);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eev-open-note[b-3y47nmobn4] { font-size: 12px; color: var(--h-dim); margin-left: auto; white-space: nowrap; }

.eev-open-art[b-3y47nmobn4] { padding: 14px 20px 4px; color: var(--h-accent-2); }
.eev-open-art svg[b-3y47nmobn4] { width: 100%; height: auto; display: block; }

.eev-stages[b-3y47nmobn4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px 20px;
    border-top: 1px solid var(--h-border);
}

.eev-stage[b-3y47nmobn4] { display: flex; align-items: center; gap: 10px; }

/* Done / running / not yet — set from _stage in the markup, where the old
   24-second keyframes used to cycle these three looks on a timer. */
.eev-stage.is-done[b-3y47nmobn4] { color: var(--h-dim); }
.eev-stage.is-active[b-3y47nmobn4] { color: var(--h-fg); }
.eev-stage.is-wait[b-3y47nmobn4] { color: var(--h-dim); opacity: .65; }

.eev-tick[b-3y47nmobn4] {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--h-border);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eev-dot[b-3y47nmobn4] {
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--h-accent-2);
    border-radius: 2px;
    /* Only the running stage renders a dot, so the pulse needs no per-stage rule. */
    animation: eev-pulse-b-3y47nmobn4 1.6s ease-in-out infinite;
}

.eev-check[b-3y47nmobn4] { position: absolute; color: var(--h-accent-2); }

.eev-stage-name[b-3y47nmobn4] { font-size: 14px; }
.eev-stage-note[b-3y47nmobn4] { font-size: 12px; color: var(--h-dim); }

.eev-bar[b-3y47nmobn4] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    background: var(--h-border);
}

.eev-bar-in[b-3y47nmobn4] {
    width: 25%;
    height: 100%;
    background: var(--h-accent-2);
    animation: eev-indet-b-3y47nmobn4 2.1s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* ============================== ERROR ============================ */

.eev-err[b-3y47nmobn4] {
    box-sizing: border-box;
    width: 100%;
    max-width: 620px;
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--h-bad) 45%, var(--h-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--h-bad) 8%, var(--h-card));
}

.eev-err > svg[b-3y47nmobn4] { flex: 0 0 17px; margin-top: 2px; color: var(--h-bad); }
.eev-err-title[b-3y47nmobn4] { font-size: 15px; font-weight: 600; color: var(--h-bad); }
.eev-err-hint[b-3y47nmobn4] { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--h-dim); }

/* ============================= SAMPLE ============================ */

.eev-sample[b-3y47nmobn4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--h-dim);
}

.eev-chip[b-3y47nmobn4] {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--h-fg);
    background: var(--h-chip-bg);
    border: 1px solid var(--h-chip-bd);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
}

.eev-chip:hover:not(:disabled)[b-3y47nmobn4] { border-color: var(--h-accent); }

/* Both are disabled while a model opens — one load at a time, see OpenModel.razor. */
.eev-chip:disabled[b-3y47nmobn4], .eev-back:disabled[b-3y47nmobn4] { opacity: .45; cursor: default; }

/* ============================ SECTIONS =========================== */

.eev-sec[b-3y47nmobn4] { padding: 66px 0 8px; }

.eev-eyebrow[b-3y47nmobn4] { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--h-accent); }

.eev-h2[b-3y47nmobn4] {
    margin: 10px 0 0;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -.02em;
    max-width: 640px;
    text-wrap: balance;
}

.eev-note[b-3y47nmobn4], .eev-para[b-3y47nmobn4] { color: var(--h-dim); max-width: 640px; }
.eev-note[b-3y47nmobn4] { margin: 14px 0 0; font-size: 14px; line-height: 1.55; }
.eev-para[b-3y47nmobn4] { margin: 14px 0 0; font-size: 16px; line-height: 1.55; }

/* Sized to its cards rather than to a fixed column count: this app reads ONE
   format, and the ported 5-column grid left that single card a fifth of the page
   wide with four empty tracks beside it. */
.eev-formats[b-3y47nmobn4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
    gap: 12px;
    margin-top: 26px;
}

.eev-format[b-3y47nmobn4] {
    background: var(--h-card);
    border: 1px solid var(--h-border);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
}

.eev-format-ext[b-3y47nmobn4] { font-size: 20px; font-weight: 700; font-family: var(--mono); color: var(--h-accent); }
.eev-format-name[b-3y47nmobn4] { margin-top: 6px; font-size: 13px; color: var(--h-dim); }

.eev-cards[b-3y47nmobn4] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }

.eev-card[b-3y47nmobn4] {
    background: var(--h-card);
    border: 1px solid var(--h-border);
    border-radius: 14px;
    padding: 22px;
}

.eev-card-title[b-3y47nmobn4] { font-size: 17px; font-weight: 600; }
.eev-card-body[b-3y47nmobn4] { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--h-dim); }

/* ============================== CTA ============================== */

.eev-cta[b-3y47nmobn4] {
    padding: 72px 0 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.eev-cta-btn[b-3y47nmobn4] {
    position: relative;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--h-accent);
    border: none;
    border-radius: 8px;
    padding: 12px 26px;
    cursor: pointer;
}

.eev-cta-btn:hover[b-3y47nmobn4] { filter: brightness(1.08); }

.eev-foot[b-3y47nmobn4] {
    margin-top: 44px;
    padding: 26px 0;
    text-align: center;
    font-size: 13px;
    color: var(--h-dim);
    border-top: 1px solid var(--h-border);
}

/* ============================ RESPONSIVE ========================= */
/* Desktop-first, per the brief. These only stop the layout breaking on a
   narrow window; below ~768px is out of scope. */

@media (max-width: 900px) {
    .eev-h1[b-3y47nmobn4] { font-size: 40px; }
    .eev-cards[b-3y47nmobn4] { grid-template-columns: 1fr; }
    /* .eev-formats needs no override — auto-fit already sizes to its one card. */
    .eev-links[b-3y47nmobn4] { display: none; }
}

/* ============================ KEYFRAMES ==========================
   What is left once the opening card's stages moved to real state: the four
   animations that must not stop while the WASM runtime holds the UI thread.

   The prototype drove the stage ticks and labels from a 24-second loop shared
   with the line-draw, so an open slower than that visibly started over —
   "Reading file" re-lighting, the bridge erasing itself — and read as the viewer
   opening the same file twice. The ticks now come from _stage, and the line-draw
   runs ONCE and holds (forwards, not infinite).

   Names are prefixed because @keyframes are global even from a scoped stylesheet. */

@keyframes eev-indet-b-3y47nmobn4 { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
@keyframes eev-spin-b-3y47nmobn4 { to { transform: rotate(360deg); } }
@keyframes eev-pulse-b-3y47nmobn4 { 0%, 100% { transform: scale(1); } 50% { transform: scale(.55); } }
@keyframes eev-hint-b-3y47nmobn4 { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@keyframes eev-dr1-b-3y47nmobn4 { 0% { stroke-dashoffset: 900; } 14%, 100% { stroke-dashoffset: 0; } }
@keyframes eev-dr2-b-3y47nmobn4 { 0%, 10% { stroke-dashoffset: 900; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes eev-dr3-b-3y47nmobn4 { 0%, 29% { stroke-dashoffset: 900; } 48%, 100% { stroke-dashoffset: 0; } }
@keyframes eev-dr4-b-3y47nmobn4 { 0%, 45% { stroke-dashoffset: 900; } 66%, 100% { stroke-dashoffset: 0; } }
@keyframes eev-dr5-b-3y47nmobn4 { 0%, 62% { stroke-dashoffset: 900; } 84%, 100% { stroke-dashoffset: 0; } }

/* 12 s rather than the prototype's 24: the drawing is meant to finish and hold for
   a normal open, not to be caught halfway when the model is ready. */
.eev-dr1[b-3y47nmobn4] { stroke-dasharray: 900; animation: eev-dr1-b-3y47nmobn4 12s linear forwards; }
.eev-dr2[b-3y47nmobn4] { stroke-dasharray: 900; animation: eev-dr2-b-3y47nmobn4 12s linear forwards; opacity: .5; }
.eev-dr3[b-3y47nmobn4] { stroke-dasharray: 900; animation: eev-dr3-b-3y47nmobn4 12s linear forwards; }
.eev-dr4[b-3y47nmobn4] { stroke-dasharray: 900; animation: eev-dr4-b-3y47nmobn4 12s linear forwards; }
.eev-dr5[b-3y47nmobn4] { stroke-dasharray: 900; animation: eev-dr5-b-3y47nmobn4 12s linear forwards; }
.eev-hint[b-3y47nmobn4] { animation: eev-hint-b-3y47nmobn4 3.2s ease-in-out infinite; }