@import '_content/DRYL.Components.Agents/DRYL.Components.Agents.re9dmxhqkf.bundle.scp.css';
@import '_content/DRYL.Components/DRYL.Components.5t84w0ca43.bundle.scp.css';

/* /Components/Examples/Agents/CanvasArtifacts.razor.rz.scp.css */
/* Chat pane and live artifact side by side; stacks on narrow viewports. */
.canvas-demo[b-5wr8o0q6go] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--sp-4);
    align-items: stretch;
}

/* Stretch the artifact to the grid row — but not once it has left the flow for the
   fullscreen top layer, where the canvas's own inset defines the box. */
.canvas-demo[b-5wr8o0q6go]  .canvas-demo-surface:not(.is-expanded) {
    min-height: 100%;
}

@media (max-width: 720px) {
    .canvas-demo[b-5wr8o0q6go] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Examples/Agents/OpenAiCanvasArtifacts.razor.rz.scp.css */
/* Chat pane and live artifact side by side; stacks on narrow viewports. */
.canvas-demo[b-s8dg15i3do] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--sp-4);
    align-items: stretch;
}

/* Stretch the artifact to the grid row — but not once it has left the flow for the
   fullscreen top layer, where the canvas's own inset defines the box. */
.canvas-demo[b-s8dg15i3do]  .canvas-demo-surface:not(.is-expanded) {
    min-height: 100%;
}

@media (max-width: 720px) {
    .canvas-demo[b-s8dg15i3do] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Examples/Agents/OpenAiCanvasWorkspace.razor.rz.scp.css */
/* The workspace fills the example card; the dock floats over the page from the top layer. */
.ws-live[b-fthb0emmq5] {
    display: flex;
    flex-direction: column;
    min-height: 460px;
}

.ws-live[b-fthb0emmq5]  .ws-live-surface {
    min-height: 420px;
}
/* /Components/Examples/CanvasWorkspace/Basic.razor.rz.scp.css */
/* The workspace fills the example card; the dock floats over the page from the top layer,
   so it needs no room here — only the surface does. */
.ws-demo[b-r8a2cqh5gc] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 420px;
}

.ws-demo[b-r8a2cqh5gc]  .ws-demo-surface {
    min-height: 380px;
}

.ws-demo-hint[b-r8a2cqh5gc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--fg-dim);
}
/* /Components/Examples/CanvasWorkspace/Direct.razor.rz.scp.css */
/* The workspace fills the example card; the dock floats over the page from the top layer,
   so it needs no room here — only the surface does. */
.ws-demo[b-by40wgm3fu] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 420px;
}

.ws-demo[b-by40wgm3fu]  .ws-demo-surface {
    min-height: 380px;
}

.ws-demo-hint[b-by40wgm3fu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--fg-dim);
}

/* Discoverability: without this line nobody finds the toolbar, because it only exists once
   something is selected. */
.direct-hint[b-by40wgm3fu] {
    margin: 0;
    font-size: 13px;
    color: var(--fg-muted);
}

.direct-hint kbd[b-by40wgm3fu] {
    padding: 0 var(--sp-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--glass-1);
    font-family: inherit;
    font-size: 12px;
}
/* /Components/Examples/CanvasWorkspace/Document.razor.rz.scp.css */
/* Save/load/undo is a toolbar over a workspace — the surface needs the room, the row does not. */
.doc-demo[b-k3zei6d4wm] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.doc-demo[b-k3zei6d4wm]  .doc-demo-surface {
    min-height: 260px;
}

.doc-demo-status[b-k3zei6d4wm] {
    font-size: 13px;
    color: var(--fg-dim);
}
/* /Components/Pages/DemoReconnectModal.razor.rz.scp.css */
.rc-demo-grid[b-7pzgeph0yp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
}

/* The `transform` turns each frame into the containing block for the
   component's `position: fixed` overlay, capturing the full-screen modal
   inside the frame so all three states can sit side by side on the page. */
.rc-demo-frame[b-7pzgeph0yp] {
    position: relative;
    height: 320px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 80% at 50% 0%, var(--glass-1), transparent),
        var(--ground);
    transform: translateZ(0);
}
/* /Components/Pages/Overview.razor.rz.scp.css */
/* Layout-only grid scaffolding for the Overview showcase page.
   Visuals come entirely from the components — tokens only here. */

.ov-page[b-zouhqs1gvc] {
    gap: var(--sp-5);
}

.ov-header[b-zouhqs1gvc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.ov-kpis[b-zouhqs1gvc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
}

.ov-main[b-zouhqs1gvc] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-5);
    align-items: start;
}

.ov-grid-3[b-zouhqs1gvc] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    align-items: start;
}

.ov-bottom[b-zouhqs1gvc] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-5);
    align-items: start;
}

@media (max-width: 1100px) {
    .ov-main[b-zouhqs1gvc],
    .ov-bottom[b-zouhqs1gvc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ov-grid-3[b-zouhqs1gvc] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}