/* =============================================================================
   pico-tamer.css — the last word on Pico's opinionated element defaults.

   Loaded AFTER pico + styles.css + paper-theme.css, so it always wins.

   The problem: Pico styles BARE HTML elements — <article>, <section>,
   <details>, <summary>, <button>, <table>, <fieldset> — with card
   backgrounds, borders, shadows, padding, and full-width form/button sizing.
   Slate builds its own components with classes, so that bare-element chrome is
   almost always unwanted, and every new element meant another per-page
   override. This kills it once and for all.

   How it stays safe — every selector is `element:not([class])`:
   - `:not([class])` matches only elements with NO class attribute, so anything
     that carries a class (i.e. every intentional Slate component) is never
     touched — there is nothing to fight or override.
   - the specificity (0,1,1) sits ABOVE Pico's bare-element rules (0,0,1), so
     the reset actually wins on the classless elements it targets.

   The rule this enforces: a bare element renders like plain HTML. Want chrome?
   Add a class and style it. No more whack-a-mole.
   ============================================================================= */

/* ---- Universal kills: Pico chrome that is NEVER wanted in Slate -----------
   Unlike the classless resets below, these few apply to ALL elements — classed
   or not — because Pico's form bottom-margin, summary bottom-margin, and
   summary dropdown marker are pure noise here: Slate lays out its own forms
   and always uses its own carets. Killing them universally stops the same
   handful of bugs (the "white bar" gap, the stray chevron, the mystery bottom
   padding) from recurring on every new details/form surface, classed or not.
   `details > summary` (0,0,2) matches/beats Pico's own selectors and loads
   last, so no !important needed; component classes still win for anything
   they set themselves. */
/* !important is deliberate here: this reset layer loads last and must beat
   Pico's own selectors whatever their specificity (e.g. Pico sets the summary
   gap via `details[open]>summary`, 0,1,1). Nothing in Slate ever wants a
   Pico summary margin, marker, or form bottom-margin, so winning outright is
   the point. A component that truly needs one can still use its own !important. */
form { margin-bottom: 0 !important; }
summary { margin-bottom: 0 !important; list-style: none !important; }
summary::-webkit-details-marker,
summary::marker,
summary::after { display: none !important; content: '' !important; }

/* ---- Semantic containers: no card chrome on bare elements ----------------- */
article:not([class]),
section:not([class]),
aside:not([class]),
figure:not([class]),
blockquote:not([class]),
details:not([class]),
hgroup:not([class]) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ---- details / summary: no "white bar", no marker, no accordion chrome ---- */
summary:not([class]) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  list-style: none;
  font-weight: inherit;
}
summary:not([class])::-webkit-details-marker { display: none; }
summary:not([class])::marker { content: ''; }
summary:not([class])::after { display: none; }   /* Pico's dropdown chevron */

/* ---- Buttons: inline + auto-width on bare buttons (Pico forces 100%) ------ */
button:not([class]),
input:not([class])[type="button"],
input:not([class])[type="submit"],
input:not([class])[type="reset"] {
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

/* ---- Form controls: kill the full-width + bottom margin on bare fields ---- */
input:not([class]),
select:not([class]),
textarea:not([class]) {
  width: auto;
  margin-bottom: 0;
}
input:not([class]):not([type="checkbox"]):not([type="radio"]),
select:not([class]),
textarea:not([class]) {
  box-shadow: none;
}
input:not([class]):focus-visible,
select:not([class]):focus-visible,
textarea:not([class]):focus-visible {
  outline: 2px solid var(--slate-gold, #E1AE65);
  outline-offset: 1px;
  box-shadow: none;
}

/* ---- Tables: no Pico striping/borders on bare tables ---------------------- */
table:not([class]) {
  margin: 0;
  --pico-table-border-color: transparent;
  --pico-table-row-stripped-background-color: transparent;
}
table:not([class]) th,
table:not([class]) td {
  background: none;
  border-bottom: 1px solid var(--slate-line-dark, #2a2a2a);
}

/* ---- fieldset / legend: no box on bare fieldsets ------------------------- */
fieldset:not([class]) { margin: 0; padding: 0; border: 0; }
legend:not([class]) { padding: 0; }

/* ---- Nav: Pico gives bare <nav> spacing/list chrome we rarely want -------- */
nav:not([class]) { margin: 0; }
nav:not([class]) ul,
nav:not([class]) ol { margin: 0; padding: 0; }
nav:not([class]) li { padding: 0; }