/*
 * The playground's own layer, on top of Material's.
 *
 * Everything here is scoped to `.playground`, and everything Material already
 * provides is gone: no `body`, no `h1`, no bare `a` or `code`, no box-sizing
 * reset, no font stack. What is left is the compact instrument the page is —
 * panes, chips, a field grid — and the three places Material has to be talked
 * out of a decision it makes for prose.
 *
 * Two things a reader of the old standalone file should know. The root font size
 * is Material's 125%, so a rem is 20px here and was 16px there; sizes are in em
 * against the container, spacing in rem against Material's scale. And the dark
 * scheme is the reader's choice on the palette switch, not the operating
 * system's — `[data-md-color-scheme="slate"]`, never a media query, or the
 * playground would fight the page it sits in.
 *
 * The palette is the documentation's, to the value, and generated from
 * tools/build-palette.php. Every pair clears 4.5:1 — which the lobster itself
 * cannot, at 2.87:1 on bone and 3.88:1 on the dark pane, so each scheme uses a
 * value drawn from it instead.
 */
:root {
    /* >>> generated palette — run `make palette`, do not edit by hand */
    --pitch-black:   #231c07;         /* the ink, and the dark field */
    --bone:          #ece2d0;         /* the light field, and the light ink — never #fff */
    --lobster-pink:  #c46d5e;         /* the hue the other two are drawn from; carries no text itself */
    --lobster-deep:  #9c4536;         /* light mode: 4.93:1 on bone, both as the header and as a link */
    --lobster-light: #cd8777;         /* dark mode: 4.99:1 on the raised pane, the tighter dark surface */
    --dark-blue:     #272a35;         /* the raised pane, dark mode — the playground and the docs code blocks */
    /* <<< generated palette */
}

/* What the playground calls the palette. Its own layer, because these names are
   what PaletteTest measures, pair by pair. */
.playground {
    --accent: var(--lobster-deep);
    --accent-bg: #eaddcb;
    --bg: var(--bone);
    --error: #8a1c1c;
    --error-bg: #f7e3dd;
    --fg: var(--pitch-black);
    /* --line separates panes, where being seen is enough. --line-strong draws
       form fields, where 1.4.11 asks 3:1. */
    --line: #c4baa8;
    --line-strong: #837b67;
    --muted: #675f4b;
    /* Bone lifted, not white. The lift is 1.15:1, so the border separates. */
    --pane: #f6f2ea;
    /* Material's three radii: 2px for controls, code and inline labels; 4px for
       admonitions, which is what a pane is. The third is .md-tag's pill, literal
       below on the chips. */
    --radius: 2px;
    --radius-block: 4px;
    --mono: var(--md-code-font-family, SFMono-Regular, Consolas, Menlo, monospace);

    font-size: .8rem;
    line-height: 1.55;
    color: var(--fg);
}

[data-md-color-scheme="slate"] .playground {
    --accent: var(--lobster-light);
    --accent-bg: #332410;
    --bg: var(--pitch-black);
    --error: #f08f8f;
    --error-bg: #2c1a1a;
    --fg: var(--bone);
    --line: #574f3b;
    --line-strong: #8d8574;
    --muted: #b0a794;
    --pane: var(--dark-blue);
}

/* ------------------------------------------------------------------ Material */

/* Material treats every <details> in typeset as an admonition — blue rule, note
   icon, its own type size. The options box is a control, not a callout.
   `.md-typeset` is named here on purpose: these rules exist only to outrank
   Material's, several of which are written `[dir=ltr] .md-typeset summary` and
   outrank a class on their own. */
.md-typeset .playground details {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    font-size: inherit;
    margin: 0;
    padding: 0;
}
.md-typeset .playground details > summary {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: .8em;
    font-weight: inherit;
    letter-spacing: .06em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
.md-typeset .playground details > summary::before,
.md-typeset .playground details > summary::after { content: none; display: none; }

/* Typeset spaces prose. Inside the instrument, each block sets its own. */
.md-typeset .playground h2,
.md-typeset .playground h3,
.md-typeset .playground p,
.md-typeset .playground dl,
.md-typeset .playground dd,
.md-typeset .playground ul { margin: 0; }
.md-typeset .playground dd { margin-left: 0; }
.md-typeset .playground ul { padding-left: 0; list-style: none; }

/* --------------------------------------------------------------------- shell */

.playground { margin-top: 1.2rem; }

.playground h2 {
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 0 0 .8em;
    font-weight: 700;
}
.playground h3 {
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 1.2em 0 .4em;
    font-weight: 700;
}

.playground .muted { color: var(--muted); }
.playground .hint { margin: -.3em 0 .9em; font-size: .78em; }
.playground .hint code { color: var(--accent); background: none; padding: 0; }

.playground .presets { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .8rem; }
.playground .presets-label { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.playground .preset-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.playground .preset-chips button {
    font-size: .82em;
    padding: .18em .55em;
    border-radius: 999px; /* .md-tag's pill, the one shape Material rounds fully */
    background: var(--pane);
}
.playground .preset-chips button[aria-pressed="true"] {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.playground .panes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
@media screen and (max-width: 76.1875em) { .playground .panes { grid-template-columns: 1fr; } }

.playground .pane {
    background: var(--pane);
    border: 1px solid var(--line);
    border-radius: var(--radius-block);
    padding: .8rem .9rem 1rem;
}

/* --------------------------------------------------------------------- form */

.playground .field { display: block; margin-bottom: .8rem; }
.playground .field > span { display: block; font-size: .74em; color: var(--muted); margin-bottom: .25rem; }

.playground input[type="text"],
.playground textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .3rem .35rem;
}
.playground textarea { resize: vertical; line-height: 1.5; tab-size: 2; }
.playground input[type="text"]:focus,
.playground textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.playground .options { padding: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.playground fieldset { border: none; padding: 0; margin: 0; }
.playground legend { font-size: .74em; color: var(--muted); padding: 0 0 .25rem; }
.playground .radios { display: flex; gap: .7rem; }
.playground .radios label { font-size: .85em; display: inline-flex; gap: .25rem; align-items: center; }
.playground .option { font-size: .85em; display: inline-flex; gap: .4rem; align-items: center; }
.playground .option > span { color: var(--muted); font-size: .78em; }
.playground .option.checkbox { gap: .35rem; }
.playground .note { flex-basis: 100%; font-size: .78em; }
.playground .note code { background: none; padding: 0; }

/* ------------------------------------------------------------------- digest */

.playground .digest { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .7rem; }
.playground .digest dt { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.playground .digest dd { min-width: 0; }
.playground .mono { font-family: var(--mono); font-size: 13px; }
.playground .wrap { overflow-wrap: anywhere; }
/* The payoff of the whole library, so it is not the smallest thing on the page. */
.playground .hash { color: var(--accent); font-weight: 600; font-size: 15.5px; letter-spacing: .01em; }

.playground .error {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid currentColor;
    border-radius: var(--radius-block);
    padding: .5rem .6rem;
    margin-bottom: .8rem;
}

.playground .rules ul,
.playground .notes ul,
.playground .compare ul { padding-left: 0; list-style: none; }
.playground .rules li,
.playground .compare li { margin-bottom: .45rem; }
.playground .rules li:last-child,
.playground .compare li:last-child { margin-bottom: 0; }
.playground .rules .id,
.playground .compare .id { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.playground .rules .why { display: block; font-size: .82em; color: var(--muted); }
.playground .notes li { font-family: var(--mono); font-size: 12.5px; }

.playground .actions { display: flex; gap: .5rem; margin-top: 1rem; }

.playground button {
    font: inherit;
    font-size: .82em;
    padding: .25em .7em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    cursor: pointer;
}
.playground button:hover { border-color: var(--accent); }
.playground button.link {
    border: none;
    background: none;
    color: var(--accent);
    padding: 0;
    font-size: .74em;
    text-decoration: underline;
}

.playground .compare { border-top: 1px solid var(--line); margin-top: 1rem; }
.playground .compare p { margin: .3em 0 .6em; font-size: .9em; }
.playground .compare .same { color: var(--accent); font-weight: 600; }

/* Sticky, not fixed: this bar belongs to the playground, and a bar pinned to the
   viewport would sit on top of the site's own footer on every scroll. */
.playground .status {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-top: .8rem;
    padding: .5rem .6rem;
    background: var(--pane);
    border: 1px solid var(--line);
    border-radius: var(--radius-block);
    font-size: .8em;
}
.playground .engine {
    font-family: var(--mono);
    font-size: 12px;
    padding: .1rem .45rem;
    border-radius: var(--radius);
    background: var(--accent-bg);
    color: var(--accent);
}
.playground .status button { margin-left: auto; }
.playground .status[data-state="loading"] .engine { animation: pg-pulse 1.2s ease-in-out infinite; }
@keyframes pg-pulse { 50% { opacity: .45; } }