/* Tag reference pages + explorer + 404 — extends the shared design system. */
@import url("system.css?v=fe851281");

@layer components {
  :root:has(#css-toggle:checked) {
    & main :is(p, dd, figcaption) { max-inline-size: 75ch; }

    /* ---- Tag title block ---- */
    & hgroup h1 {
      font-size: var(--step-3);
      & code { background: none; padding: 0; color: var(--brand-strong); }
    }
    & hgroup p { color: var(--text-muted); font-size: var(--step-1);
      font-weight: 400; margin-block-start: 0.4em; line-height: 1.45; }

    /* ---- Baseline / category chips (Material tonal) ---- */
    & article > header > p:last-child {
      margin-block-start: 1em;
      display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
      color: var(--text-muted); font-size: var(--step--1);
      & data {
        display: inline-flex; align-items: center; gap: 0.45em;
        border-radius: 999px; padding: 0.3em 0.9em;
        font-weight: 650;
        background: var(--brand-tint);
        border: 1px solid var(--brand-tint-border);
        color: var(--brand-strong);
        &::before { content: ""; inline-size: 0.5em; block-size: 0.5em;
          border-radius: 50%; background: currentcolor; }
      }
      & data[value="limited"] {
        --chip: oklch(62% 0.14 75);
        background: color-mix(in oklch, var(--chip) 16%, var(--surface));
        border-color: color-mix(in oklch, var(--chip) 45%, var(--surface));
        color: oklch(from var(--chip) calc(l - 0.18) c h);
      }
    }

    /* ---- Sections ---- */
    & section { margin-block: calc(var(--space) * 1.8); }
    & h2 {
      font-size: var(--step-1);
      margin-block-end: 0.55em;
      display: flex; align-items: center; gap: 0.5em;
      &::after { content: ""; flex: 1; block-size: 1px;
        background: var(--hairline); }
    }

    & dl {
      display: grid; grid-template-columns: max-content 1fr;
      gap: 0.55em 1.4em; align-items: baseline;
      background: var(--surface-raised);
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      padding: var(--space);
      box-shadow: var(--shadow-1);
      & dt { font-weight: 600; }
      & dd { color: var(--text-muted); }
    }

    /* ---- Live example frame ---- */
    & figure {
      display: grid; gap: 0.9em;
      grid-template-columns: minmax(0, 1fr);
      & > div {
        background: var(--surface-raised);
        border: 1px solid var(--brand-tint-border);
        border-radius: var(--radius);
        padding: var(--space);
        box-shadow: var(--shadow-1);
        position: relative;
        overflow: clip;
        &::before {
          content: "live";
          position: absolute; inset-block-start: 0; inset-inline-end: 0;
          font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--brand-strong);
          background: var(--brand-tint);
          padding: 0.25em 0.8em;
          border-end-start-radius: var(--radius-s);
        }
      }
      & figcaption { color: var(--text-muted); font-size: var(--step--1); }
    }

    /* ---- Reference links ---- */
    & section ul { padding-inline-start: 1.2em; display: grid; gap: 0.5em;
      & li::marker { color: var(--brand); } }

    /* ---- Long-form flow spacing (the field guide; benign on tag pages) ---- */
    & main :is(p, ul, ol, menu, dl, figure, blockquote, pre, table, details,
               fieldset, video, audio, iframe, dialog) {
      margin-block: 0.9em;
    }
    & main h3 { margin-block: 1.5em 0.55em; font-size: 1.12em; }
    & main :is(h4, h5, h6) { margin-block: 1.2em 0.45em; }
    & main :is(ul, ol, menu) { padding-inline-start: 1.4em; }
    & main li + li { margin-block-start: 0.3em; }
    & main li > :is(ul, ol) { margin-block: 0.3em 0; }
    & hr {
      border: none;
      border-block-start: 1px solid var(--hairline);
      margin-block: calc(var(--space) * 1.6);
    }
    & main blockquote {
      padding-inline-start: 1em;
      border-inline-start: 3px solid color-mix(in oklch, var(--brand) 35%, var(--rule));
    }
    & main summary { cursor: pointer; font-weight: 600; }
    & main dialog[open] {
      position: static;
      inline-size: 100%;
      padding: var(--space);
      border: 1px solid var(--rule);
      border-inline-start: 4px solid var(--brand);
      border-radius: var(--radius);
      background: var(--surface-raised);
      color: var(--text);
    }
    & main :is(fieldset) {
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      padding: var(--space);
      & legend { font-weight: 700; padding-inline: 0.5em; color: var(--brand-strong); }
    }
    & main form p { display: grid; gap: 0.25em; justify-items: start; }
    & main input:not([type="checkbox"], [type="radio"]), & main select, & main textarea {
      border: 1.5px solid var(--rule);
      border-radius: 8px;
      padding: 0.4em 0.7em;
      background: var(--surface);
      color: var(--text);
      max-inline-size: 100%;
    }
    & main form label { font-weight: 600; font-size: 0.92em; }
    & main form p:has(> input[type="radio"]), & main form p:has(> input[type="checkbox"]) {
      grid-template-columns: auto 1fr; align-items: center; gap: 0.5em;
    }

    /* ---- Tables (rendered snippets on tag pages, live tables on the demo) ---- */
    & table {
      border-collapse: collapse;
      background: var(--surface-raised);
      border: 1px solid var(--hairline);
      margin-block: 0.8em;
    }
    & caption {
      caption-side: top; text-align: start;
      font-weight: 650; color: var(--text-muted); font-size: var(--step--1);
      padding-block-end: 0.5em;
    }
    & th, & td {
      border: 1px solid var(--hairline);
      padding: 0.45em 0.8em;
      text-align: start; vertical-align: top;
    }
    & thead th, & tfoot th, & tfoot td {
      background: color-mix(in oklch, var(--brand) 11%, var(--surface));
    }

    /* ---- In-article table of contents (the demo page) ---- */
    & article > nav[aria-label="Table of contents"] {
      background: var(--surface-raised);
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      padding: var(--space);
      margin-block: var(--space);
      & h2 { font-size: var(--step--1); font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.13em;
        color: var(--text-muted); margin-block-end: 0.6em;
        &::after { content: none; } }
      & ol { margin: 0; padding-inline-start: 1.3em;
        columns: 2; column-gap: calc(var(--space) * 1.5);
        & li { padding-block: 0.15em; break-inside: avoid; }
        & li::marker { color: var(--brand); }
        & a { text-decoration: none;
          &:hover { text-decoration: underline; } } }
    }

    /* ---- In-article search card (the demo's MDN lookup) ---- */
    & article > search {
      background: color-mix(in oklch, var(--brand) 11%, var(--surface));
      border: 1px solid color-mix(in oklch, var(--brand) 28%, var(--surface));
      border-radius: var(--radius);
      padding: var(--space);
      margin-block: var(--space);
      & form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
      & label { flex-basis: 100%; font-weight: 650; font-size: var(--step--1); }
      & input {
        flex: 1; min-inline-size: 12rem;
        border: 1.5px solid color-mix(in oklch, var(--brand) 28%, var(--surface));
        border-radius: 999px;
        padding: 0.5em 1.1em; background: var(--surface-raised);
        color: var(--text);
        &:focus-visible { border-color: var(--brand); outline-offset: 0; }
      }
      & button {
        border: none; border-radius: 999px; padding: 0.5em 1.3em;
        background: var(--brand); color: oklch(99% 0.005 var(--hue));
        font-weight: 700; cursor: pointer;
        &:hover { background: oklch(from var(--brand) calc(l - 0.07) c h); }
      }
    }

    /* ---- Explorer page: tonal chip grid ---- */
    & article > ul {
      list-style: none; padding: 0;
      display: flex; flex-wrap: wrap; gap: 0.5rem;
      margin-block-end: var(--space);
      & a { text-decoration: none;
        & code {
          display: inline-block;
          background: var(--surface-raised);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          padding: 0.4em 0.75em; font-size: 0.92em;
          box-shadow: var(--shadow-1);
          transition: translate 140ms ease-out, background 140ms ease-out,
                      border-color 140ms ease-out, box-shadow 140ms ease-out;
        }
        &:hover code {
          background: var(--brand-tint);
          border-color: var(--brand-tint-border);
          color: var(--brand-strong);
          translate: 0 -2px;
          box-shadow: var(--shadow-2);
        }
      }
    }
    /* Explorer family headings */
    & article > h2 {
      margin-block: 1.6em 0.6em;
      font-size: var(--step--1); font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.14em;
      color: var(--text-muted);
      &::after { content: none; }
    }
  }
}