/* /Client/Components/Prism/PrismFigurePlate.razor.rz.scp.css */
/*
    Scoped styling for the de-flattened figure surface.

    Deliberately thin. The composited markup carries its own geometry as inline styles, because
    slot positions are computed per plate and cannot live in a stylesheet — every plate detects
    differently. What belongs here is only what is the same for every figure: the frame, the
    editing affordances, and the crowding notice.
*/

.prism-figure-plate[b-ch9qgffmmo] {
    display: grid;
    gap: 12px;
}

.prism-figure-plate__canvas[b-ch9qgffmmo] {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface, #fff);
}

/* The plate itself must never be draggable or selectable — it is the backdrop, and a stray
   drag of the image is the fastest way to make a canvas feel broken. */
[b-ch9qgffmmo] .prism-plate__art {
    -webkit-user-drag: none;
    user-select: none;
}

/* Editing affordances: nothing visible at rest, so the figure reads as a finished artifact
   rather than a form. The outline appears on hover and focus, where it answers the only
   question the user is asking — can I change this? */
[b-ch9qgffmmo] [data-gixo-canvas-editable] {
    outline: 1px solid transparent;
    outline-offset: 3px;
    border-radius: 3px;
    transition: outline-color 120ms ease, background-color 120ms ease;
    cursor: text;
}

[b-ch9qgffmmo] [data-gixo-canvas-editable]:hover {
    outline-color: color-mix(in srgb, var(--mud-palette-primary, #2C7BE5) 45%, transparent);
}

[b-ch9qgffmmo] [data-gixo-canvas-editable]:focus,
[b-ch9qgffmmo] [data-gixo-canvas-editable]:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #2C7BE5);
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 82%, transparent);
}

/* A string the compositor had to set below the reading floor. Marked on the canvas as well as
   in the notice, so the reader can see WHICH label is the problem rather than being told a
   count and left to hunt for it. */
[b-ch9qgffmmo] [data-prism-tight="true"] {
    outline-color: color-mix(in srgb, var(--mud-palette-warning, #B07A22) 55%, transparent);
}

.prism-figure-plate__notice[b-ch9qgffmmo] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary, #1A1D23);
    background: color-mix(in srgb, var(--mud-palette-warning, #B07A22) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning, #B07A22) 32%, transparent);
}

.prism-figure-plate__action[b-ch9qgffmmo] {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default, #DEE1E8);
    background: var(--mud-palette-surface, #fff);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.prism-figure-plate__action:hover[b-ch9qgffmmo] {
    border-color: var(--mud-palette-primary, #2C7BE5);
}

.prism-figure-plate__absent[b-ch9qgffmmo] {
    display: contents;
}

@media (prefers-reduced-motion: reduce) {
    [b-ch9qgffmmo] [data-gixo-canvas-editable] {
        transition: none;
    }
}
/* /Client/Components/Proposals/ArcWalkthrough.razor.rz.scp.css */
.arc-walkthrough[b-fzg593c2jd] {
    --arc-walkthrough-ink: #f8fafc;
    --arc-walkthrough-muted: #a8b4c5;
    --arc-walkthrough-accent: #67e8f9;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: clamp(1rem, 2.6vw, 1.75rem);
    box-sizing: border-box;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 88% 4%, rgba(14, 165, 233, 0.17), transparent 34%),
        linear-gradient(145deg, rgba(8, 12, 20, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.38);
    font-family: var(--gixo-font-public-sans, Inter, system-ui, sans-serif);
}

.arc-walkthrough__copy[b-fzg593c2jd] {
    max-width: 760px;
    margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
    text-align: center;
}

.arc-walkthrough__kicker[b-fzg593c2jd] {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(103, 232, 249, 0.28);
    border-radius: 999px;
    color: var(--arc-walkthrough-accent);
    background: rgba(45, 212, 191, 0.08);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.arc-walkthrough h2[b-fzg593c2jd] {
    margin: 0;
    color: var(--arc-walkthrough-ink);
    font-size: clamp(1.65rem, 3.4vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.arc-walkthrough__copy p[b-fzg593c2jd] {
    margin: 0.9rem auto 0;
    color: var(--arc-walkthrough-muted);
    font-size: clamp(0.96rem, 1.5vw, 1.08rem);
    line-height: 1.7;
}

.arc-walkthrough__media[b-fzg593c2jd] {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: clamp(1rem, 2.2vw, 1.5rem);
    background: #020617;
    box-shadow: 0 20px 55px rgba(2, 6, 23, 0.52);
}

.arc-walkthrough__poster[b-fzg593c2jd],
.arc-walkthrough__player[b-fzg593c2jd] {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}

.arc-walkthrough__poster[b-fzg593c2jd] {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: inherit;
    background: #020617;
    cursor: pointer;
    appearance: none;
    font: inherit;
    text-align: left;
}

.arc-walkthrough__poster img[b-fzg593c2jd] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 240ms ease, filter 240ms ease;
}

.arc-walkthrough__shade[b-fzg593c2jd] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.06) 35%, rgba(2, 6, 23, 0.9) 100%),
        linear-gradient(90deg, rgba(2, 6, 23, 0.34), transparent 60%);
}

.arc-walkthrough__play[b-fzg593c2jd] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(3.7rem, 8vw, 5rem);
    height: clamp(3.7rem, 8vw, 5rem);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.92);
    box-shadow: 0 14px 35px rgba(8, 145, 178, 0.42);
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, background-color 180ms ease;
}

.arc-walkthrough__play-icon[b-fzg593c2jd] {
    width: 0;
    height: 0;
    margin-left: 0.3rem;
    border-top: 0.7rem solid transparent;
    border-bottom: 0.7rem solid transparent;
    border-left: 1.05rem solid #f8fafc;
}

.arc-walkthrough__poster-copy[b-fzg593c2jd] {
    position: absolute;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(0.85rem, 2.5vw, 1.4rem);
    left: clamp(1rem, 3vw, 1.75rem);
    display: grid;
    gap: 0.25rem;
    color: #f8fafc;
}

.arc-walkthrough__poster-copy strong[b-fzg593c2jd] {
    max-width: calc(100% - 4.5rem);
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    line-height: 1.25;
}

.arc-walkthrough__poster-copy small[b-fzg593c2jd] {
    max-width: min(38rem, calc(100% - 4.5rem));
    color: #cbd5e1;
    font-size: clamp(0.72rem, 1.5vw, 0.88rem);
    line-height: 1.45;
}

.arc-walkthrough__duration[b-fzg593c2jd] {
    position: absolute;
    right: clamp(1rem, 3vw, 1.5rem);
    bottom: clamp(1rem, 2.5vw, 1.4rem);
    min-width: 3.2rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 0.5rem;
    color: #f8fafc;
    background: rgba(2, 6, 23, 0.78);
    font-size: 0.8rem;
    font-weight: 850;
    text-align: center;
}

.arc-walkthrough__poster:hover img[b-fzg593c2jd] {
    filter: saturate(1.08) brightness(0.9);
    transform: scale(1.015);
}

.arc-walkthrough__poster:hover .arc-walkthrough__play[b-fzg593c2jd] {
    background: rgba(14, 165, 233, 0.98);
    transform: translate(-50%, -50%) scale(1.05);
}

.arc-walkthrough__poster:focus-visible[b-fzg593c2jd],
.arc-walkthrough__footer a:focus-visible[b-fzg593c2jd] {
    outline: 3px solid #f0abfc;
    outline-offset: 4px;
}

.arc-walkthrough__footer[b-fzg593c2jd] {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem clamp(1rem, 2.5vw, 1.4rem);
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.94);
    font-size: 0.78rem;
    line-height: 1.5;
}

.arc-walkthrough__footer a[b-fzg593c2jd] {
    flex: 0 0 auto;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--arc-walkthrough-accent);
    font-weight: 800;
    text-underline-offset: 0.2rem;
}

.arc-walkthrough__sr-only[b-fzg593c2jd] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .arc-walkthrough[b-fzg593c2jd] {
        border-radius: 1.25rem;
    }

    .arc-walkthrough__footer[b-fzg593c2jd] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .arc-walkthrough__poster-copy small[b-fzg593c2jd] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arc-walkthrough__poster img[b-fzg593c2jd],
    .arc-walkthrough__play[b-fzg593c2jd] {
        transition: none;
    }

    .arc-walkthrough__poster:hover img[b-fzg593c2jd],
    .arc-walkthrough__poster:hover .arc-walkthrough__play[b-fzg593c2jd] {
        transform: none;
    }

    .arc-walkthrough__poster:hover .arc-walkthrough__play[b-fzg593c2jd] {
        transform: translate(-50%, -50%);
    }
}