/*! PolyFishCSS-Classless.css | v0.22.0 | polyfish.org | MIT
 *
 * Plain HTML, styled. No classes required.
 *
 *   <link rel="stylesheet" href="PolyFishCSS-Core.min.css">
 *   <link rel="stylesheet" href="PolyFishCSS-Classless.min.css">
 *
 *   <main>
 *     <h1>Title</h1>
 *     <p>Paragraph with a <a href="#">link</a>.</p>
 *     <button>Save</button>
 *     <table>...</table>
 *   </main>
 *
 * WHY
 *   Classless frameworks have a real following for documentation, prototypes
 *   and small sites: one link and semantic HTML looks finished. The usual
 *   catch is that they stop there — the moment a page needs a card grid or a
 *   pricing table, you switch frameworks.
 *
 *   This module is the on-ramp instead of the destination. Bare elements look
 *   right with only Core and this file loaded, and every PolyFish component
 *   still works on top of it, because every rule here is wrapped in :where()
 *   and has zero specificity. Add .pf-btn to one button and the component
 *   wins; the unclassed buttons beside it keep the classless look.
 *
 * SCOPE
 *   Styles apply to elements WITHOUT a class. An element carrying any class
 *   is assumed to be under the author's or a component's control, so this
 *   file leaves it alone. That is the rule that makes it safe to add to an
 *   existing page.
 *
 * Depends on: Core (tokens and reset). Optional. Load after Core.
 */
@layer polyfish.core, polyfish.classless, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.variants, polyfish.fonts;

@layer polyfish.classless {

  /* Page frame: a readable column, centred, with the site gutter. */
  :where(body > header, body > main, body > footer) {
    inline-size: min(100% - 2 * var(--pf-gutter), 72rem);
    margin-inline: auto;
  }
  :where(body > main) { padding-block: var(--pf-space-8); }
  :where(body > header) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-space-4);
    border-block-end: 1px solid var(--pf-border);
    padding-block: var(--pf-space-5);
  }
  :where(body > footer) {
    border-block-start: 1px solid var(--pf-border);
    color: var(--pf-text-muted);
    font-size: var(--pf-text-sm);
    padding-block: var(--pf-space-7);
  }

  /* Navigation: a bare <nav><ul> becomes a row. */
  :where(nav:not([class]) ul) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  :where(nav:not([class]) a) { color: var(--pf-text-muted); text-decoration: none; }
  :where(nav:not([class]) a:hover, nav:not([class]) a[aria-current]) { color: var(--pf-text); }

  /* Rhythm between flow content. */
  :where(main :is(p, ul, ol, dl, pre, table, figure, blockquote, form, details, hr, section, article) + *) {
    margin-block-start: var(--pf-space-5);
  }
  :where(main :is(h2, h3) ) { margin-block-start: var(--pf-space-8); }
  :where(main :is(h2, h3) + *) { margin-block-start: var(--pf-space-4); }
  :where(main > h1 + p) { color: var(--pf-text-muted); font-size: var(--pf-text-lg); }

  /* Links. */
  :where(a:not([class])) {
    color: var(--pf-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* Buttons: every unclassed button and submit input gets the primary look,
     the reset type gets the secondary one. */
  :where(button:not([class]), input:is([type="submit"], [type="button"], [type="reset"]):not([class])) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    background: var(--pf-accent);
    border: 1px solid var(--pf-accent);
    border-radius: var(--pf-radius-pill);
    color: var(--pf-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    padding: 0.6rem 1.4rem;
  }
  :where(button[type="reset"]:not([class]), input[type="reset"]:not([class])) {
    background: transparent;
    color: var(--pf-text);
  }
  :where(button:not([class]):not([type="reset"]):hover,
         input:is([type="submit"], [type="button"]):not([class]):hover) {
    background: color-mix(in srgb, var(--pf-accent) 86%, var(--pf-text));
  }
  :where(button[type="reset"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
    background: var(--pf-surface-raised);
  }
  :where(button:not([class]):focus-visible,
         input:is([type="submit"], [type="button"], [type="reset"]):not([class]):focus-visible) {
    outline: 2px solid var(--pf-focus);
    outline-offset: 2px;
  }
  :where(button:not([class]):disabled,
         input:is([type="submit"], [type="button"], [type="reset"]):not([class]):disabled) {
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* Fields. */
  :where(label:not([class])) { display: block; font-weight: 500; margin-block-end: var(--pf-space-2); }
  :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"]):not([class]), select:not([class]), textarea:not([class])) {
    inline-size: 100%;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    color: var(--pf-text);
    font: inherit;
    padding: 0.65rem 0.85rem;
  }
  :where(textarea:not([class])) { field-sizing: content; min-block-size: 5lh; }
  :where(input:not([class]):focus-visible, select:not([class]):focus-visible, textarea:not([class]):focus-visible) {
    border-color: var(--pf-accent);
    outline: 2px solid var(--pf-focus);
    outline-offset: 1px;
  }
  :where(input[aria-invalid="true"]:not([class]), input:not([class]):user-invalid) { border-color: #e08f8f; }
  :where(fieldset:not([class])) {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: var(--pf-space-5);
  }
  :where(form:not([class]) > * + *) { margin-block-start: var(--pf-space-4); }

  /* Tables: a wide one scrolls rather than pushing the page sideways. */
  :where(table:not([class])) {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--pf-text-sm);
  }
  :where(table:not([class]) :is(th, td)) {
    border-block-end: 1px solid var(--pf-border);
    padding: var(--pf-space-3) var(--pf-space-4);
    text-align: start;
  }
  :where(table:not([class]) thead th) { color: var(--pf-text-muted); font-weight: 600; }

  /* Code. */
  :where(pre:not([class])) {
    background: var(--pf-bg-deep);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow-x: auto;
    padding: var(--pf-space-4) var(--pf-space-5);
  }
  :where(:not(pre) > code:not([class])) {
    background: var(--pf-surface-raised);
    border-radius: var(--pf-radius-sm);
    padding: 0.1em 0.35em;
  }

  /* Quotes, rules, disclosure, dialogs. */
  :where(blockquote:not([class])) {
    border-inline-start: 3px solid var(--pf-accent);
    color: var(--pf-text-muted);
    font-size: var(--pf-text-lg);
    padding-inline-start: var(--pf-space-5);
  }
  :where(hr:not([class])) { border: 0; border-block-start: 1px solid var(--pf-border); }
  :where(details:not([class])) {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: var(--pf-space-4) var(--pf-space-5);
  }
  :where(details:not([class]) > summary) { cursor: pointer; font-weight: 600; }
  :where(dialog:not([class])) {
    max-inline-size: min(34rem, calc(100vw - 2rem));
    background: var(--pf-bg-deep);
    border: 1px solid var(--pf-border-strong);
    border-radius: var(--pf-radius-lg);
    color: var(--pf-text);
    padding: var(--pf-space-6);
  }
  :where(dialog:not([class]))::backdrop { background: rgba(0, 4, 18, 0.72); }

  /* Figures, marks and small print. */
  :where(figure:not([class])) { margin-inline: 0; }
  :where(figcaption:not([class])) { color: var(--pf-text-muted); font-size: var(--pf-text-sm); margin-block-start: var(--pf-space-2); }
  :where(mark:not([class])) { background: var(--pf-accent-wash); color: var(--pf-text); padding-inline: 0.2em; }
  :where(small:not([class])) { color: var(--pf-text-muted); }
  :where(kbd:not([class])) {
    border: 1px solid var(--pf-border-strong);
    border-block-end-width: 2px;
    border-radius: var(--pf-radius-sm);
    font-family: var(--pf-font-mono);
    font-size: 0.85em;
    padding: 0.05em 0.4em;
  }

  /* The small print of semantics: abbreviations, edits, definitions. */
  :where(abbr[title]:not([class])) {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
  }
  :where(ins:not([class])) {
    background: var(--pf-accent-wash);
    color: var(--pf-text);
    text-decoration: none;
  }
  :where(del:not([class])) { color: var(--pf-text-muted); }
  :where(dt:not([class])) { font-weight: 600; }
  :where(dd:not([class])) { margin-inline-start: var(--pf-space-5); }
  :where(sub:not([class]), sup:not([class])) { font-size: 0.72em; line-height: 0; }
  :where(caption:not([class])) {
    caption-side: bottom;
    color: var(--pf-text-muted);
    font-size: var(--pf-text-sm);
    padding-block-start: var(--pf-space-2);
    text-align: start;
  }
  :where(legend:not([class])) { font-weight: 600; padding-inline: var(--pf-space-2); }
}