/*
 * Styling for the three cards the hosted build adds. Uses the dashboard's own custom
 * properties throughout, so the panel follows the light/dark theme toggle without
 * knowing anything about it, and inherits its contrast decisions rather than making
 * new ones.
 */
.hosted-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.hosted-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    color: var(--text-primary);
}

.hosted-card h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    color: var(--text-primary);
}

.hosted-card p {
    margin: 0 0 .75rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.hosted-card .hosted-note {
    font-size: .85rem;
    /* --text-secondary, not --text-muted. #94a3b8 on the card's white gives 2.6:1,
       which fails WCAG AA for body text; #64748b gives 4.8:1 and passes. The caveat
       about what the sanitiser cannot catch is the last text that should be hard to
       read. */
    color: var(--text-secondary);
}

.hosted-card pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: .75rem;
    overflow-x: auto;          /* the snippet scrolls itself rather than the page */
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.hosted-card button + button,
.hosted-card button + a {
    margin-left: .5rem;
}

.hosted-card a.btn {
    display: inline-block;
    text-decoration: none;
}

/* The panel is keyboard-navigable like the rest of the app; make that visible. */
.hosted-card :is(button, a):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/*
 * The loading bar's starting width used to be a `style="width: 0%"` attribute in the
 * markup. The hosted page's CSP has no 'unsafe-inline', which blocks style attributes
 * parsed from markup, so the build strips it and the default belongs here instead —
 * without it `.progress-fill` has no width rule at all and the bar renders full before
 * the first byte is parsed.
 */
.progress-fill {
    width: 0;
}


/*
 * The site header the hosted build injects above the dashboard's own. Its height is
 * what .header, .sidebar and the content are offset by — 4rem, and 5rem from the same
 * breakpoint the site switches at.
 */
:root {
    --site-nav-height: 4rem;
}

@media (min-width: 1024px) {
    :root {
        --site-nav-height: 5rem;
    }
}

.header {
    top: var(--site-nav-height);
}

.sidebar {
    top: calc(var(--header-height) + var(--site-nav-height));
    height: calc(100vh - var(--header-height) - var(--site-nav-height));
}

.main-content,
.main-wrapper {
    padding-top: var(--site-nav-height);
}