/*
 * The playground pages' own styles: the page around the grid, never the grid.
 *
 * The grid is styled by the package's stylesheet, `dist/styles.css`, which an application imports as
 * `apsw-gridwright/styles.css`. Nothing here overrides a `gw-*` class, so what you see in the grid is
 * what a consumer gets.
 */

:root {
    --page-bg: #f8fafc;
    --page-surface: #ffffff;
    --page-text: #0f172a;
    --page-muted: #64748b;
    --page-border: #e2e8f0;
    --page-accent: #2563eb;
    --chip-bg: #e2e8f0;
    --chip-text: #334155;
    --chip-ok-bg: #dcfce7;
    --chip-ok-text: #166534;
    --code-bg: #f1f5f9;
    color-scheme: light dark;
}

/* The grid follows prefers-color-scheme through its own tokens, so the page has to follow it too. */
@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #020617;
        --page-surface: #0f172a;
        --page-text: #e2e8f0;
        --page-muted: #94a3b8;
        --page-border: #1e293b;
        --page-accent: #60a5fa;
        --chip-bg: #1e293b;
        --chip-text: #cbd5e1;
        --chip-ok-bg: #14532d;
        --chip-ok-text: #bbf7d0;
        --code-bg: #020617;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 24px 16px 96px;
    background: var(--page-bg);
    color: var(--page-text);
    font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

a { color: var(--page-accent); }

.wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 20px; }
.stack { display: grid; gap: 20px; }
h1 { margin: 0 0 4px; font-size: 22px; }
p.version { margin: 0 0 8px; color: var(--page-muted); font: 12px/1.4 ui-monospace, monospace; }
p.lead { margin: 0; color: var(--page-muted); max-width: 76ch; }
.muted { color: var(--page-muted); font-weight: 400; }

/* --- panels ------------------------------------------------------------------------------------ */

.panel {
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: 12px;
    padding: 16px;
    /* A grid item is `min-width: auto` by default, which means it refuses to be narrower than its
       content. A wide grid -- under `columnLayout()`, one whose columns add up to more than the
       page -- then pushes this panel and the whole page sideways instead of scrolling inside the
       table's own wrapper. Any container holding a grid needs this; see docs/column-layout.md. */
    min-width: 0;
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.panel h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--page-muted);
}

.panel h3 { margin: 14px 0 8px; font-size: 13px; font-weight: 600; }

/* "source: employees/app.js" beside a panel title, linking to the file that implements it. */
.sources { font-size: 12px; color: var(--page-muted); }
.source {
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--code-bg);
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    text-decoration: none;
}
.source:hover { text-decoration: underline; }

.hint {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--page-accent);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--page-accent) 8%, transparent);
    color: var(--page-muted);
}

/* --- controls ---------------------------------------------------------------------------------- */

.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.row + .row { margin-top: 10px; }
label.inline { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }

select, button, textarea {
    font: inherit;
    padding: 6px 10px;
    border: 1px solid var(--page-border);
    border-radius: 6px;
    background: var(--page-surface);
    color: inherit;
}
button { cursor: pointer; }

/* --- the report editor ------------------------------------------------------------------------- */

.editor {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 14px;
}
@media (max-width: 860px) { .editor { grid-template-columns: minmax(0, 1fr); } }

.editor-fields { display: grid; gap: 10px; }
.field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--page-muted); }
.field textarea { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--page-text); resize: vertical; }
.placeholders { margin: 0; font-size: 12px; color: var(--page-muted); line-height: 1.9; }
.placeholders code, .editor-code code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.placeholders code { padding: 1px 5px; border-radius: 4px; background: var(--code-bg); color: var(--page-text); }

.editor-code { display: grid; gap: 4px; align-content: start; font-size: 12px; font-weight: 600; color: var(--page-muted); }
.editor-code pre {
    margin: 0;
    padding: 12px;
    overflow: auto;
    border-radius: 8px;
    background: var(--code-bg);
    color: var(--page-text);
    font-weight: 400;
    white-space: pre;
}

/* --- cells and diagnostics --------------------------------------------------------------------- */

.badge-cell {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 12px; background: var(--chip-bg); color: var(--chip-text);
}
.badge-cell[data-active='true'] { background: var(--chip-ok-bg); color: var(--chip-ok-text); }

/* The actions column's buttons: icons, with the row's name in aria-label and the action in title. */
.action-buttons { display: inline-flex; gap: 2px; }
.icon-button {
    display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 6px; background: none; color: var(--page-muted); cursor: pointer;
}
.icon-button svg { width: 16px; height: 16px; }
.icon-button:hover:not(:disabled) { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.icon-button:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 1px; }
.icon-button[data-destructive='true']:hover:not(:disabled) { color: var(--gw-danger); }
.icon-button:disabled { opacity: 0.35; cursor: default; }

.kind {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: 11px; background: color-mix(in srgb, currentColor 12%, transparent);
}

.stats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 0; }
.stat dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--page-muted); }
.stat dd { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; }

.log {
    margin: 0; max-height: 150px; overflow: auto;
    font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--page-muted);
}
.log b { color: var(--page-text); font-weight: 600; }

/* --- failures ---------------------------------------------------------------------------------- */

.failure {
    border-left: 3px solid #b91c1c;
    padding: 12px 14px;
    background: color-mix(in srgb, #b91c1c 10%, transparent);
    border-radius: 0 8px 8px 0;
}
.failure code.detail { display: block; margin-top: 8px; opacity: 0.85; }
.failure pre.command { background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 8px; overflow: auto; }

/* The page's own add-on, `employees/pay-band.js`: a tint on high salaries and a legend under the table. */
.pay-band--high {
    background: color-mix(in srgb, var(--gw-accent, #2563eb) 14%, transparent);
    font-weight: 600;
}

.pay-band-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #475569;
}

.pay-band-swatch {
    inline-size: 0.9rem;
    block-size: 0.9rem;
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--gw-accent, #2563eb) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gw-accent, #2563eb) 40%, transparent);
}

/* The pin controls in employees/column-layout.js. Page chrome, not part of the grid: they are here
   to show that an add-on of your own reaches the same controller the built-in picker uses. */
.pin-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pin-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pin-group > .muted {
    margin-inline-end: 4px;
}

.pin-group button {
    padding: 2px 6px;
    font-size: 0.8rem;
}

.pin-group button[aria-pressed='true'] {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

/* The `rowDetail()` panel on the employees page. The package ships the structure; this is the
   page's own dressing, the same as any consumer would write. */
.detail-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 640px;
}

.detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}

/* A stand-in for a narrow screen or a sidebar: responsive() follows this box, not the window. */
.width-box { max-width: 100%; outline: 1px dashed var(--border, #cbd5e1); outline-offset: 4px; transition: width 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .width-box { transition: none; } }