/*
 * The demo credentials panel, as it appears above the storefront sign-in form.
 *
 * Loaded only on the pages that actually render the panel — demo-guard adds it
 * to the asset pipeline from the same code path that injects the markup, so an
 * ordinary page never downloads it.
 *
 * ## Why every colour is a var() with a light-dark() behind it
 *
 * The Kahuna theme resolves its whole palette through light-dark() and
 * publishes it as `--k-*` custom properties, so keying off those is what makes
 * the panel belong to the page in both colour schemes without this file knowing
 * anything about the theme's colours. But demo-guard ships inside a skeleton
 * that somebody will point at a different theme, and a var() with no fallback
 * resolves to nothing at all. So each token below is
 * `var(--k-thing, light-dark(light, dark))`: the theme's value when there is
 * one, this file's own pair when there is not, and a sensible result either
 * way. Nothing here is added to the theme.
 *
 * There is no `prefers-color-scheme` media query here and there must not be
 * one. Kahuna gives the visitor a light/dark/auto toggle, which stamps
 * `data-theme` on the root and sets `color-scheme` from it — so on any visit
 * where the visitor has picked the opposite of their operating system, a media
 * query is wrong. light-dark() reads `color-scheme` and gets it right in all
 * three cases: the OS preference, a pinned theme option, and the toggle.
 *
 * For the same reason, nothing here declares `color-scheme` either. Declaring
 * it — even as the apparently harmless `light dark` — detaches the element from
 * the page's chosen scheme and hands it back to the operating system, so the
 * panel goes dark inside a light card the moment a visitor picks light on a
 * dark machine. It has to inherit.
 */

.demo-creds {
    --dc-panel-bg: var(--k-surface-sunk, light-dark(#f3e6d0, #1c140d));
    --dc-code-bg: var(--k-surface, light-dark(#fffcf4, #241b12));
    --dc-ink: var(--k-ink, light-dark(#2b1c0c, #f6ead7));
    --dc-ink-soft: var(--k-ink-soft, light-dark(#5c4a38, #d8c8b1));
    --dc-muted: var(--k-muted, light-dark(#8a7660, #a28d75));
    --dc-line: var(--k-line, light-dark(#e4d5bc, #382b1d));
    --dc-line-strong: var(--k-line-strong, light-dark(#c9b9a4, #4d3d2c));
    --dc-brand: var(--k-brand-strong, light-dark(#a2551d, #f0a463));
    --dc-radius: var(--k-radius, 14px);
    --dc-radius-sm: var(--k-radius-sm, 8px);
    --dc-mono: var(--k-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);

    display: block;
    margin: 0 0 1.6rem;
    padding: 1rem 1.1rem 1.05rem;
    background: var(--dc-panel-bg);
    border: 1px solid var(--dc-line-strong);
    border-left: 4px solid var(--dc-brand);
    border-radius: var(--dc-radius);
    color: var(--dc-ink);
    font-size: .88rem;
    line-height: 1.5;
    text-align: left;
}

.demo-creds__heading {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dc-brand);
}

/* Quieter than the rows below it: the credentials are what a visitor came to
   this panel for, and the sentence explaining them is not. */
.demo-creds__intro {
    margin: 0 0 .8rem;
    font-size: .82rem;
    color: var(--dc-ink-soft);
}

.demo-creds__list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.demo-creds__row {
    display: grid;
    gap: .15rem;
    padding: .55rem .7rem;
    background: var(--dc-code-bg);
    border: 1px solid var(--dc-line-strong);
    border-radius: var(--dc-radius-sm);
}

.demo-creds__label {
    margin: 0;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dc-muted);
}

.demo-creds__value {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
}

/* The row is the box; a bordered chip inside it as well would be a box inside a
   box. The theme styles bare `code` as a chip — background, border, padding —
   so all three are unset here rather than only some of them. */
.demo-creds__code {
    font-family: var(--dc-mono);
    font-size: .95rem;
    font-weight: 500;
    color: var(--dc-ink);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    /* The values are the point of the panel: a visitor should be able to
       double-click one and get exactly it, with no stray punctuation. */
    user-select: all;
    overflow-wrap: anywhere;
}

.demo-creds__sep {
    color: var(--dc-muted);
}

.demo-creds__note {
    margin: .85rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--dc-line);
    font-size: .82rem;
    color: var(--dc-ink-soft);
}

.demo-creds__link {
    font-family: var(--dc-mono);
    color: var(--dc-brand);
    text-decoration: underline;
    text-underline-offset: .18em;
}

.demo-creds__link:hover,
.demo-creds__link:focus-visible {
    text-decoration-thickness: 2px;
}

/*
 * Winning back the paragraphs from the Login plugin's own stylesheet.
 *
 * `#grav-login p { text-align: center; font-size: small; margin: 1rem 0 }` in
 * plugin://login/css/login.css applies to everything inside the sign-in
 * section, this panel included, and an id beats any number of classes — so
 * there is no class selector that can answer it. The panel is inside that
 * section by definition, since it is appended to the sign-in page's own
 * content, so matching the same id is honest rather than a trick. It is also
 * what the Kahuna theme does one layer up, for the same reason.
 *
 * Centred copy above a column of left-aligned form labels reads as a mistake,
 * which is the whole of why this block exists.
 */
#grav-login .demo-creds,
#grav-login .demo-creds p,
#grav-login .demo-creds dl,
#grav-login .demo-creds dt,
#grav-login .demo-creds dd {
    text-align: left;
}

#grav-login .demo-creds__intro {
    margin: 0 0 .8rem;
    font-size: .82rem;
}

#grav-login .demo-creds__note {
    margin: .85rem 0 0;
    font-size: .82rem;
}

/* A browser without light-dark() would drop every fallback above and be left
   with whatever the theme publishes — which on a theme that publishes nothing
   is an unstyled panel. Restate the light half for it. */
@supports not (color: light-dark(#000, #fff)) {
    .demo-creds {
        --dc-panel-bg: var(--k-surface-sunk, #f3e6d0);
        --dc-code-bg: var(--k-surface, #fffcf4);
        --dc-ink: var(--k-ink, #2b1c0c);
        --dc-ink-soft: var(--k-ink-soft, #5c4a38);
        --dc-muted: var(--k-muted, #8a7660);
        --dc-line: var(--k-line, #e4d5bc);
        --dc-line-strong: var(--k-line-strong, #c9b9a4);
        --dc-brand: var(--k-brand-strong, #a2551d);
    }
}