@import '_content/TradeYoke.Domains.Electrician/TradeYoke.Domains.Electrician.70bg1hsq8j.bundle.scp.css';
@import '_content/TradeYoke.Domains.Gardening/TradeYoke.Domains.Gardening.4rao64c813.bundle.scp.css';
@import '_content/TradeYoke.Domains.Plumber/TradeYoke.Domains.Plumber.ka4oojorfy.bundle.scp.css';
@import '_content/TradeYoke.Domains.Scaffolding/TradeYoke.Domains.Scaffolding.1awlkuyv4h.bundle.scp.css';
@import '_content/TradeYoke.Domains.SolarInstaller/TradeYoke.Domains.SolarInstaller.4sk11y747c.bundle.scp.css';
@import '_content/TradeYoke.Domains.WindowCleaning.Game/TradeYoke.Domains.WindowCleaning.Game.mwvcntv8f4.bundle.scp.css';
@import '_content/TradeYoke.Domains.WindowCleaning/TradeYoke.Domains.WindowCleaning.jw7ve3dmx5.bundle.scp.css';
@import '_content/TradeYoke.Modules.Projects/TradeYoke.Modules.Projects.qv0a9n5fbu.bundle.scp.css';
@import '_content/TradeYoke.Modules.Shared/TradeYoke.Modules.Shared.2vd6bxra9m.bundle.scp.css';
@import '_content/TradeYoke.Shared/TradeYoke.Shared.ob54jeu9zm.bundle.scp.css';

/* /DemoHost.razor.rz.scp.css */
/* Full-page demo chrome: a slim "you're in a demo · back to the marketing site" bar above the real
   app. The app shell sizes its sidebar to the viewport (height:100vh), so inside the demo we constrain
   it (via ::deep) to sit UNDER the bar rather than overflow the page. Tokens come from the active
   platform theme (Trusty/Graft), so the bar themes with the rest of the app. */

.ty-demo[b-4irxejk8ty] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.ty-demo-bar[b-4irxejk8ty] {
    flex: none;
    height: 44px;
    display: flex;
    align-items: center;
    gap: var(--ty-space-md, 12px);
    padding: 0 16px;
    background: var(--ty-color-ink, #0b1f33);
    color: var(--ty-color-text-onink, #e6edf3);
    font: var(--ty-weight-semibold, 600) 13px/1 var(--ty-font-base, sans-serif);
    z-index: 50;
}

.ty-demo-badge[b-4irxejk8ty] {
    flex: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--ty-color-primary, #1e6fd9);
    color: var(--ty-color-primary-contrast, #fff);
}

.ty-demo-note[b-4irxejk8ty] {
    color: var(--ty-color-text-onink-muted, #9fb0c0);
    font-weight: var(--ty-weight-medium, 500);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ty-demo-note b[b-4irxejk8ty] {
    color: var(--ty-color-text-onink, #fff);
    font-weight: var(--ty-weight-bold, 700);
}

.ty-demo-spacer[b-4irxejk8ty] {
    flex: 1;
}

.ty-demo-back[b-4irxejk8ty],
.ty-demo-cta[b-4irxejk8ty] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border-radius: var(--ty-radius-control, 6px);
    padding: 7px 13px;
    font-weight: var(--ty-weight-semibold, 600);
    font-size: 12.5px;
    white-space: nowrap;
}

.ty-demo-back[b-4irxejk8ty] {
    color: var(--ty-color-text-onink, #fff);
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
}

.ty-demo-back:hover[b-4irxejk8ty] {
    background: color-mix(in srgb, #fff 12%, transparent);
}

.ty-demo-back svg[b-4irxejk8ty] {
    width: 14px;
    height: 14px;
}

.ty-demo-cta[b-4irxejk8ty] {
    color: var(--ty-color-ink, #0b1f33);
    background: #fff;
}

.ty-demo-cta:hover[b-4irxejk8ty] {
    background: #eef2f7;
}

.ty-demo-body[b-4irxejk8ty] {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* On DESKTOP the shared shell sizes the sidebar to the full viewport; inside the demo it must fit under
   the 44px bar. Scoped overrides via ::deep — desktop only (≥1025px, matching the shell's breakpoint).
   Below that the shell turns the sidebar into an off-canvas drawer (its own CSS), so we must NOT force a
   sidebar height here or it fights the drawer — the demo just lets the shell's mobile layout take over. */
@media (min-width: 1025px) {
    .ty-demo-body[b-4irxejk8ty]  .page {
        height: 100%;
    }

    .ty-demo-body[b-4irxejk8ty]  .sidebar {
        height: calc(100vh - 44px);
    }

    .ty-demo-body[b-4irxejk8ty]  main {
        height: calc(100vh - 44px);
        overflow-y: auto;
    }
}

@media (max-width: 720px) {
    .ty-demo-note[b-4irxejk8ty] {
        display: none;
    }
}