/* Daisy-only adjustments to the shared demo chrome (demo.css) and to PlayBlazor's bench
   (PlaygroundView.razor.css, scoped: its selectors carry one attribute, so these use three
   classes to win). Everything here stays outside .pb-specimen: the specimen is daisyUI's. */

/* ---- One accent: on DaisyBlazor's home the library's primary owns the chrome too, so the
   bench toggles, tile glyphs and code rule match the blue specimens instead of a second violet.
   --color-primary comes from app.css under data-theme="daisyblazor" (index.html). ---- */
:root {
    --demo-accent: var(--color-primary, #6d4aff);
    --demo-accent-content: var(--color-primary-content, #ffffff);
}

/* var(--demo-accent), not var(--color-primary): resolved at :root, so the theme row below re-skins
   the specimens while the bench chrome keeps DaisyBlazor's blue. */
.demo-host .pb-playground {
    --pb-accent: var(--demo-accent);
    --pb-accent-soft: color-mix(in oklch, var(--demo-accent) 14%, transparent);
}

.demo-host .pbw-panel {
    --pbw-accent: var(--demo-accent);
}

::selection {
    background: color-mix(in oklch, var(--color-primary, #6d4aff) 22%, transparent);
}

/* The rest of the chrome that hardcodes PlayBlazor's violet: the hero's wordmark, secondary link
   and CTA glow, the snippet's tag colour, and the explorer workspace. Each selector carries one
   class more than the shared or scoped rule it retints; layout and type stay theirs. */
.demo-host .demo-landing .demo-wordmark-lib,
.demo-host .demo-landing .demo-hero .demo-cta-2 {
    color: color-mix(in oklch, var(--color-primary, #6d4aff) 45%, white);
}

.demo-host .demo-landing .demo-hero .demo-cta-2 {
    text-decoration-color: color-mix(in oklch, var(--color-primary, #6d4aff) 45%, transparent);
}

.demo-host .demo-landing .demo-hero .demo-cta-2:hover {
    color: #ffffff;
    text-decoration-color: currentColor;
}

.demo-host .demo-landing .demo-hero .demo-cta {
    box-shadow: 0 6px 18px -8px color-mix(in oklch, var(--color-primary, #6d4aff) 70%, transparent);
}

.demo-host .demo-landing .demo-hero .demo-cta:hover {
    background: color-mix(in oklch, var(--color-primary, #6d4aff) 86%, black);
}

.demo-host .pb-code .pb-tok-tag {
    color: color-mix(in oklch, var(--demo-accent) 40%, white);
}

/* --demo-accent, resolved at :root: a theme carried in from the home re-skins the specimen and
   the stage, never the workspace chrome. */
.demo-host .pbw {
    --pbw-accent: var(--demo-accent);
    --pbw-accent-soft: color-mix(in oklch, var(--demo-accent) 55%, white);
}

.demo-host .pbw :is(.pbw-rail-item-on, .pbw-env-on, .pbw-tnode-sel, .pbw-mtab-on) {
    background: color-mix(in oklch, var(--demo-accent) 12%, transparent);
    color: color-mix(in oklch, var(--demo-accent) 78%, black);
}

.demo-host .pbw :is(.pbw-modchip, .pbw-tag-n, .pbw-help-list dt, .pbw-code .pb-tok-tag) {
    color: color-mix(in oklch, var(--demo-accent) 78%, black);
}

.demo-host .daisy-themed[data-theme] .pbw-stage:not(.pbw-stage-dark, .pbw-stage-checker) {
    background-color: var(--color-base-100);
    background-image: radial-gradient(circle, color-mix(in oklch, var(--color-base-content) 14%, transparent) 1px, transparent 1px);
    color: var(--color-base-content);
}

.demo-host .pbw .pbw-tnode-sel .pbw-tag-n {
    color: inherit;
}

/* ---- Library lead: the first DaisyBlazor-specific thing under the shared hero. Copy left, a
   live composition right, so the library shows its character before the first bench. ---- */
.daisy-lead {
    display: grid;
    gap: 2rem;
    margin: 0 0 3.5rem;
}

/* Stacked: heading, the live card and the theme row first, then the copy, so a phone meets
   DaisyBlazor early and labelled. display: contents lets them share one order. */
@media (max-width: 860px) {
    /* The copy's own margins space the flattened children; the grid gap would double them. */
    .daisy-lead {
        gap: 0;
    }

    .daisy-lead-copy {
        display: contents;
    }

    .daisy-lead .daisy-lead-title {
        order: -2;
        margin-bottom: 1rem;
    }

    .daisy-lead .daisy-lead-proof {
        order: -1;
        margin-bottom: 1rem;
    }

    .daisy-lead .daisy-theme-row {
        order: -1;
        margin-bottom: 1.5rem;
    }
}

/* Copy and card share the top edge; the theme row runs under both, one line, as the control
   for everything below it. */
@media (min-width: 861px) {
    .daisy-lead {
        grid-template-columns: minmax(0, 1fr) 20rem;
        grid-template-areas: "copy proof" "themes themes";
        align-items: start;
        gap: 1.75rem 3.5rem;
    }

    .daisy-lead-copy {
        grid-area: copy;
        padding-top: 0.5rem;
    }

    .daisy-lead-proof {
        grid-area: proof;
    }

    .daisy-lead .daisy-theme-row {
        grid-area: themes;
        margin: 0;
        padding-top: 1.25rem;
        border-top: 1px solid #e3e3ea;
    }
}

/* One section voice, the shared catalog title's: sans 700, 1.5rem. Component names under it are
   the mono <Tag> h3s, because they are code. */
.daisy-h2 {
    margin: 0 0 0.375rem;
    color: var(--demo-ink);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.daisy-lead .daisy-lead-title {
    margin-bottom: 0.625rem;
    font-size: clamp(1.625rem, 3vw, 2rem);
    letter-spacing: -0.03em;
}

.daisy-benches-note {
    margin-bottom: 1.75rem;
}

.daisy-lead-text {
    max-width: 52ch;
    margin: 0 0 1.5rem;
    color: var(--demo-ink-2);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.daisy-lead-text code,
.daisy-lead-proof code {
    font-family: var(--demo-mono);
    font-size: 0.875em;
    color: var(--demo-ink);
}

.daisy-lead-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

/* daisyUI's own btn: the call to action is the library's button, not a lookalike. Its primary is
   pinned to the root's, so a dark or loud theme never puts it at 2:1 on the light page. */
.daisy-lead .daisy-docs {
    --color-primary: var(--demo-accent);
    --color-primary-content: var(--demo-accent-content);
    text-decoration: none;
}

.daisy-lead .daisy-docs::after {
    content: "\2197";
    font-weight: 400;
}

/* The shared bar keeps its plain-link shape; only the colour moves to the library's primary. */
.demo-host .demo-landing .demo-main .daisy-jump {
    margin: 0;
}

.demo-host .demo-landing .demo-main .daisy-jump::before {
    content: "Jump to";
}

.demo-host .demo-landing .demo-main .daisy-jump a,
.demo-host .demo-landing .demo-main .daisy-jump a:is(:hover, :focus-visible) {
    color: color-mix(in oklch, var(--demo-accent) 88%, black);
}

.daisy-lead-proof {
    margin: 0;
}

.daisy-lead-proof .card {
    border: 1px solid var(--color-base-300, #e6e6ee);
}

.daisy-lead-proof figcaption {
    margin-top: 0.75rem;
    color: var(--demo-ink-2);
    font-size: 0.8125rem;
}

/* Anchored sections land below the top edge, not flush against it. */
.demo-main [id] {
    scroll-margin-top: 1.5rem;
}

/* Generic arguments step back: the component name is what a visitor scans for. */
.daisy-tparam {
    color: var(--demo-ink-2);
    font-weight: 400;
}

/* ---- Theme row: daisyUI's themes, applied to .daisy-themed through data-theme. ---- */

/* daisyUI paints every [data-theme] with base-100 and base-content: the wrapper stays the page's,
   and only the card and the stages take the theme. color-scheme stays light so the bench's native
   selects do not turn dark under a dark theme. */
.daisy-themed[data-theme] {
    background: transparent;
    color: inherit;
    color-scheme: light;
}

.daisy-themed .pb-playground .pb-preview:not(.pb-stage-dark) {
    --pb-stage: var(--color-base-100);
    --pb-stage-dot: color-mix(in oklch, var(--color-base-content) 12%, transparent);
    color: var(--color-base-content);
    transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.daisy-lead-proof .card {
    color: var(--color-base-content);
    transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.daisy-theme-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 1rem;
}

.daisy-theme-label {
    margin-right: 0.5rem;
    color: var(--demo-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.daisy-swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0 0.7rem 0 0.35rem;
    border: 1px solid #dcdce6;
    border-radius: 999px;
    background: #ffffff;
    color: var(--demo-ink);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.daisy-swatch:hover {
    border-color: color-mix(in oklch, var(--demo-accent) 45%, #e6e6ee);
}

.daisy-swatch[aria-pressed="true"] {
    border-color: var(--demo-accent);
    box-shadow: inset 0 0 0 1px var(--demo-accent);
    font-weight: 600;
}

.daisy-swatch:focus-visible {
    outline: 2px solid var(--demo-accent);
    outline-offset: 2px;
}

/* The chip carries its own data-theme, so it previews the theme's base and three brand colours. */
.daisy-swatch-chip {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--color-base-100);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-base-content) 15%, transparent);
}

.daisy-swatch-chip > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .daisy-themed .pb-playground .pb-preview,
    .daisy-lead-proof .card {
        transition: none;
    }
}

/* ---- Not found: the explorer's nav bar, then one short way out. ---- */
.daisy-notfound-page {
    height: auto;
    min-height: 100dvh;
}

.daisy-notfound {
    box-sizing: border-box;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.daisy-notfound h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-wrap: balance;
}

.daisy-notfound p {
    margin: 0 0 1.5rem;
    color: var(--demo-ink-2);
}

.daisy-notfound .daisy-notfound-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.daisy-notfound a {
    text-decoration: none;
}

/* ---- Bench chrome ---- */

/* The Button specimen is one control: a 480px row leaves it floating in dead stage. */
@media (min-width: 721px) {
    /* The stage is as tall as the panel: at 480px a two-row grid sits in a mostly blank field. */
    .demo-main .pb-playground .pb-panel {
        max-height: 23rem;
    }

    /* One button needs no 370px field: the panel stops just past Size (in full, as the copy
       promises), so the stage shrinks with it. */
    .demo-main .daisy-bench-compact .pb-playground .pb-panel {
        max-height: 21rem;
    }

    /* Grids are tall and grow with their rows: hang them from the top of the stage, clear of the
       name chip and toolbar, instead of floating at mid-height with blank field above. */
    .demo-section:not(.daisy-bench-compact) .pb-playground .pb-preview {
        align-items: flex-start;
        padding-top: 3.25rem;
    }
}

/* The parameter panel scrolls; a fade on its bottom edge says so instead of slicing a row. */
.demo-main .pb-playground .pb-panel {
    padding-bottom: 1.75rem;
    scrollbar-width: thin;
    scrollbar-color: #cfcfdc transparent;
}

.demo-main .pb-playground .pb-panel::after {
    content: "";
    position: sticky;
    bottom: -1.75rem;
    flex: none;
    height: 2rem;
    margin: -0.25rem -0.75rem -1.75rem;
    background: linear-gradient(rgba(251, 251, 253, 0), #fbfbfd 85%);
    pointer-events: none;
}

/* Keep code clear of the absolutely placed Copy button, and show that long lines scroll. */
.demo-main .pb-playground .pb-code {
    padding-right: 5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(179, 161, 255, 0.45) transparent;
}

/* ---- Tile wall ---- */

.demo-tile:focus-visible {
    outline: 2px solid var(--demo-accent);
    outline-offset: 2px;
}

/* Phones only: the DataGrid and PropertyColumn panels fold behind a toggle (Index.razor). */
.daisy-fold-toggle {
    display: none;
}

@media (max-width: 720px) {
    .daisy-fold-toggle {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
        margin: 0 0 0.75rem;
        padding: 0 1rem;
        border: 1px solid #dcdce6;
        border-radius: 999px;
        background: #ffffff;
        color: color-mix(in oklch, var(--demo-accent) 88%, black);
        font: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
    }

    .daisy-fold-toggle:focus-visible {
        outline: 2px solid var(--demo-accent);
        outline-offset: 2px;
    }

    .demo-main .daisy-bench-fold:not(.daisy-unfolded) .pb-playground :is(.pb-panel, .pb-events) {
        display: none;
    }

    /* Long lines scroll sideways: the right edge fades so the cut reads as "more", not as a bug.
       The top band (the Copy button's row) stays solid. */
    .demo-host .demo-main .demo-section .pb-playground .pb-code {
        mask:
            linear-gradient(#000, #000) top / 100% 2.6rem no-repeat,
            linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }

    /* Event payloads wrap rather than ending in an ellipsis nobody can scroll to. */
    .demo-host .demo-main .pb-playground .pb-events li {
        flex-wrap: wrap;
    }

    .demo-host .demo-main .pb-playground .pb-event-payload {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Tall enough that the Button bench shows Color, Variant and Size, as its copy promises. */
    .demo-main .pb-playground .pb-panel {
        max-height: 28rem;
    }

    /* Snippets keep their shape and scroll sideways: the shared pre-wrap broke attributes mid-value
       with no hanging indent. The Copy button has its own row here, so nothing slides under it. */
    .demo-host .demo-main .demo-section .pb-code pre {
        white-space: pre;
        overflow-wrap: normal;
    }

    /* Example chips wrap instead of clipping mid-word at the right edge with no scroll cue. */
    .demo-host .demo-main .pb-playground .pb-variants {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    /* Narrow: the Copy button gets its own row above the code rather than covering it. */
    .demo-main .pb-playground .pb-code {
        padding-top: 2.6rem;
        padding-right: 1rem;
    }

    /* Column-major split A-K | L-Z made a phone scan down, then back up. Row-major instead: each
       letter is a full-width band whose tiles read left to right, two a row. */
    .demo-landing .demo-main .demo-tiles {
        columns: auto;
    }

    .demo-landing .demo-main .demo-tiles .demo-letter-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.5rem;
    }

    .demo-landing .demo-main .demo-tiles .demo-letter {
        grid-column: 1 / -1;
    }
}