@charset "UTF-8";
/*!
 * Pico CSS bridge — PromptSkiller
 *
 * Loads the vendored Pico 2 base into its own cascade layer and rebinds the
 * Pico design tokens to the project's existing palette, so Pico acts as an
 * element-level base that can never override the hand-rolled `style.css`
 * (unlayered rules always win over layered ones).
 *
 * This is a review-gated change: see agents/frontend-design/DESIGN_SYSTEM.md
 * and promptskiller/web/static/css/vendor/PROVENANCE.md.
 *
 * Order: load this file BEFORE /static/css/style.css.
 * Selector specificity: `:root:not([data-theme="light"])` (0,2,0) outranks
 * Pico's own dark-theme media block (0,1,1), so the project tokens win in
 * light, dark, and auto modes.
 */

@import url("vendor/pico.min.css") layer(pico);

@layer pico {
  :root,
  :root:not([data-theme="light"]) {
    --pico-font-family: var(--sans);
    --pico-font-size: 100%;
    --pico-line-height: 1.5;

    --pico-background-color: var(--bg);
    --pico-color: var(--text);
    --pico-muted-color: var(--text-dim);
    --pico-muted-border-color: var(--border);
    --pico-border-color: var(--border);
    --pico-border-radius: var(--radius);
    --pico-box-shadow: var(--shadow);

    --pico-primary: var(--accent);
    --pico-primary-background: var(--accent);
    --pico-primary-border: var(--accent);
    --pico-primary-hover: var(--accent-2);
    --pico-primary-hover-background: var(--accent-2);
    --pico-primary-hover-border: var(--accent-2);
    --pico-primary-focus: var(--focus-ring);
    --pico-primary-inverse: #fff;
    --pico-primary-underline: transparent;

    --pico-form-element-background-color: var(--bg-2, var(--bg));
    --pico-form-element-border-color: var(--border);
    --pico-form-element-color: var(--text);
    --pico-form-element-placeholder-color: var(--text-dim);
    --pico-form-element-active-background-color: var(--bg-3, var(--bg-2));
    --pico-form-element-active-border-color: var(--accent);
    --pico-form-element-focus-color: var(--focus-ring);

    --pico-card-background-color: var(--panel, var(--bg-2));
    --pico-card-border-color: var(--border);
    --pico-card-sectioning-background-color: var(--bg-3, var(--bg-2));

    --pico-code-background-color: var(--bg-3, var(--bg-2));
    --pico-code-color: var(--text);

    --pico-dropdown-background-color: var(--panel, var(--bg-2));
    --pico-dropdown-border-color: var(--border);
    --pico-dropdown-color: var(--text);
    --pico-dropdown-hover-background-color: var(--bg-3, var(--bg-2));

    --pico-progress-color: var(--accent);
    --pico-progress-background-color: var(--bg-3, var(--bg-2));

    --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.6);
  }
}

/* ---------------------------------------------------------------------
   Neutralization — unlayered, so it always outranks @layer pico.
   Layering lets the unlayered style.css win, but a declaration that
   targets an element *directly* still beats a value *inherited* from a
   styled parent. Regressions that survived layering are fixed here:
     1. `ul li { list-style: square }` (Pico) overrode the classed lists
        that set `list-style: none` on the <ul>; the <li> inherited none
        but Pico targeted the <li> itself.
     2. Pico's `article` base padding/margin/background hit the seven
        landing cards (`.glass-panel`), which only style the card chrome.
     3. Pico's `.grid { display: grid }` hijacked our `<table class="grid">`
        (History + Agents): our `.grid` rule never declared `display`, so
        Pico's layered `display: grid` beat the UA `display: table` and laid
        <thead> and <tbody> out as two grid columns (header left, rows
        right). Declaring `display: table` here (unlayered) restores the
        table; style.css's mobile `@media` `display: block` still re-wins
        under 640px because style.css loads after this file.
     4. Pico's `margin-bottom` on form controls and typed buttons pushed
        them out of alignment in the SPA's flex toolbars (see below).
     5. Pico's `nav { justify-content: space-between }` spread any app
        <nav> that is a growing / free-space flex row — the SPA topbar did
        (`.topbar-nav` grows via `flex: 1 1 auto`), which spread Dashboard
        / History / Agents edge-to-edge. An admin never saw it because the
        floated Admin tab (`margin-left: auto`) consumed the free space.
   Everything else is left to style.css; the remaining candidates are
   listed in NEUTRALIZATION.md and need visual confirmation.
   --------------------------------------------------------------------- */
li { list-style: inherit; }

article {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.grid { display: table; }

/* Pico adds `margin-bottom` to form controls and to typed buttons
   (`[type=button]/[type=reset]/[type=submit]`). In the SPA's flex rows
   (`.search-bar`, `.sort-control`, button groups) that pushes a control
   up relative to its untyped siblings and misaligns the toolbar.
   style.css owns all form spacing, so zero the margins here. */
input:not([type="checkbox"], [type="radio"]),
select,
textarea,
[type="button"],
[type="reset"],
[type="submit"] {
  margin-bottom: 0;
}

/* Pico's `nav{justify-content:space-between}` is a real base declaration,
   not a display default. Any app <nav> that is a flex row with free space
   (the SPA topbar grows with `flex: 1 1 auto`) gets its items spread
   edge-to-edge. Our navs all want left-alignment / content-hugging, so pin
   the pre-Pico default here. The admin tab still floats right through its
   own `margin-left: auto`, and the mobile bars are unaffected because their
   children grow to fill. */
nav { justify-content: flex-start; }