@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { margin: 0; padding: 0; background: var(--colour-wash); color: var(--colour-ink); }
  body, h1, h2, h3, h4, p, dl { margin: 0; }
  body { padding: 0; }
}

@layer base {
  :root {
    color-scheme: light;
    --colour-accent: #ef6905;
    --colour-accent-hover: #8b2626;
    --colour-accent-contrast: #fff;
    --colour-brand: #3e4059;
    --colour-ink: #18221f;
    --colour-paper: #fff;
    --colour-wash: #f6f7f4;
    --colour-line: #e1e4dd;
    --colour-notice: #fff4d6;
    --colour-notice-line: #e9d493;
    --colour-muted: #5a655f;
    --colour-input-line: #b9beb5;
    --colour-label-paper: #fbfcfa;
    --colour-authority: #fff8f2;
    --colour-header: #f0f0f0;
    --radius-sm: .35rem;
    --radius-md: .5rem;
    --shadow-card: 0 2px 6px rgb(26 34 28 / 4%);
    --gutter: clamp(1rem, 3vw, 3rem);
    --content-space: clamp(1.5rem, 4vw, 4rem);
    --measure: 56rem;
    --font-sans: Sen, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --colour-ink: #edf2ee;
      --colour-paper: #18221f;
      --colour-wash: #111714;
      --colour-line: #405048;
      --colour-muted: #b4c0b8;
      --colour-input-line: #718076;
      --colour-label-paper: #202b25;
      --colour-authority: #342a21;
      --colour-header: #202724;
      --colour-accent: #ef6905;
      --colour-accent-hover: #ffd3ad;
      --colour-accent-contrast: #18221f;
      --colour-notice: #453b1c;
      --colour-notice-line: #746221;
      --shadow-card: 0 2px 6px rgb(0 0 0 / 20%);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --colour-ink: #edf2ee;
    --colour-paper: #18221f;
    --colour-wash: #111714;
    --colour-line: #405048;
    --colour-muted: #b4c0b8;
    --colour-input-line: #718076;
    --colour-label-paper: #202b25;
    --colour-authority: #342a21;
    --colour-header: #202724;
    --colour-accent: #ef6905;
    --colour-accent-hover: #ffd3ad;
    --colour-accent-contrast: #18221f;
    --colour-notice: #453b1c;
    --colour-notice-line: #746221;
    --shadow-card: 0 2px 6px rgb(0 0 0 / 20%);
  }

  body {
    min-width: 20rem;
    max-width:none;
    background: var(--colour-paper);
    color: var(--colour-ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  a {
    color: var(--colour-accent);
    font-weight: 650;
    text-decoration: none;

    &:is(:hover, :focus-visible) { color: var(--colour-accent-hover); text-decoration: underline; }
  }

  h1, h2, h3, h4 { line-height: 1.1; text-shadow: 1px 0 3px rgb(200 200 200 / 60%); }
  h1 { margin: 0 0 .45em; font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.045em; }
  h2 { font-size: clamp(1.35rem, 2vw, 2rem); }
  :focus-visible { outline: 3px solid var(--colour-accent); outline-offset: 3px; }
}

@layer components {
  :is(.site-header, header) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: 1rem var(--gutter);
    border-bottom: 1px solid var(--colour-line);
    background: var(--colour-header);

    > .home-link {
      color: var(--colour-brand);
      border: 1px solid var(--colour-line);
      border-radius: var(--radius-sm);
      padding: .4rem .65rem;
      font-size: .9rem;
      font-weight: 700;

      &:hover { color: var(--colour-accent); text-decoration: none; }
    }
  }

  .site-header {
    display: grid;
    gap: .8rem;
  }

  .primary-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;

    a {
      color: var(--colour-accent);
      font-size: .9rem;
      font-weight: 700;

      &:is(:hover, :focus-visible) { color: var(--colour-accent-hover); }
    }
    .nav-separator { color: var(--colour-muted); }
  }

  :is(.search-form, header form) {
    display: flex;
    flex: 1;
    gap: .5rem;
    width: 100%;
    max-width: var(--measure);

    input {
      flex: 1;
      min-width: 0;
      border: 1px solid var(--colour-input-line);
      border-radius: var(--radius-sm);
      padding: .72rem .8rem;
      background: var(--colour-paper);
      color: inherit;
      font: inherit;
    }
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .search-loading {
    align-self: center;
    color: var(--colour-muted);
    font-size: .875rem;
    visibility: hidden;

    &.htmx-request { visibility: visible; }
  }

  .htmx-request .search-loading { visibility: visible; }

  :is(.button, header button) {
    border: 0;
    border-radius: var(--radius-sm);
    padding: .72rem 1rem;
    background: var(--colour-accent);
    color: var(--colour-accent-contrast);
    cursor: pointer;
    font: inherit;
    font-weight: 700;

    &:hover { background: var(--colour-accent-hover); }
  }

  :is(main, .page) { width: 100%; min-height: 70vh; padding: var(--content-space) var(--gutter); }

  :is(footer, .site-footer) {
    padding: 1.25rem var(--gutter);
    background: var(--colour-brand);
    color: #fff;
    font-size: .85rem;

    a { color: #ffd3ad; }
  }

  .site-footer {
    display: grid;
    gap: 1rem;

    p { margin: 0; }
    .footer-disclaimer { max-width: 72rem; color: #f4f4f4; }
    .page-timing { color: #d8dae7; font-size: .8rem; }
  }

  .notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    border-bottom: 1px solid var(--colour-notice-line);
    padding: .75rem var(--gutter);
    background: var(--colour-notice);
    font-size: .93rem;
  }
  .notice-copy { max-width: 72rem; }
  .theme-toggle {
    flex: 0 0 auto;
    border: 1px solid var(--colour-input-line);
    border-radius: 999px;
    padding: .35rem .65rem;
    background: var(--colour-paper);
    color: var(--colour-ink);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
  }
  .theme-toggle:hover { border-color: var(--colour-accent); color: var(--colour-accent); }
  .intro { max-width: 48rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }

  .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-block: 2rem; padding: 0; list-style: none; }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-block: 1.5rem;

    ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
    li { margin: 0; }
    ol :is(a, span) { display: block; min-width: 2.25rem; border: 1px solid var(--colour-line); border-radius: var(--radius-sm); padding: .35rem .55rem; text-align: center; }
    .pagination-ellipsis { min-width: auto; border: 0; padding-inline: .1rem; background: transparent; }
    [aria-current="page"] { background: var(--colour-brand); color: #fff; font-weight: 700; }
  }

  .card {
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    padding: 1.1rem;
    background: var(--colour-paper);
    box-shadow: var(--shadow-card);

    a { font-size: 1.1rem; }
  }

  .fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0;
    overflow: hidden;
    margin-block: 2rem;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    background: var(--colour-paper);

    div { border-right: 1px solid var(--colour-line); border-bottom: 1px solid var(--colour-line); padding: 1rem; background: var(--colour-paper); }
    dt { color: var(--colour-muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
    dd { margin: .2rem 0 0; font-weight: 650; }
  }

  .authority { margin: 1.5rem 0 2rem; border-left: 5px solid var(--colour-accent); padding: 1rem 1.2rem; background: var(--colour-authority); }
  .authority-links {
    display: grid;
    gap: .75rem;
    margin: 1.5rem 0 2rem;
  }
  .authority-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    background: var(--colour-authority);
    font-size: 1.05rem;

    &:hover { border-color: var(--colour-accent); text-decoration: none; }
  }
  .authority-link .link-arrow { flex: 0 0 auto; font-size: 1.35em; line-height: 1; }
  .back-link { margin: 0 0 1.25rem; }
  .use-finder {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--colour-wash);

    h2 { margin: 0; font-size: 1.35rem; }
    > p { margin: .5rem 0 0; color: var(--colour-muted); }
    form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: .75rem; align-items: end; margin-top: 1rem; }
    label { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 700; }
    input { width: 100%; min-width: 0; border: 1px solid var(--colour-input-line); border-radius: var(--radius-sm); padding: .65rem .75rem; background: var(--colour-paper); color: inherit; font: inherit; }
    .use-finder-summary { font-size: .9rem; }
  }
  .use-feedback {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--colour-wash);

    h2 { margin: 0; font-size: 1.35rem; }
    > p { margin: .5rem 0 0; color: var(--colour-muted); }
    form { margin-top: 1rem; }
    label { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 700; }
    textarea { box-sizing: border-box; width: 100%; resize: vertical; border: 1px solid var(--colour-input-line); border-radius: var(--radius-sm); padding: .7rem .8rem; background: var(--colour-paper); color: inherit; font: inherit; }
  }
  .use-guide {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--colour-paper);

    h2 { margin: 0; font-size: 1.35rem; }
    h3 { margin: 1.25rem 0 .5rem; font-size: 1.05rem; }
    > p { margin: .65rem 0 0; }
    ol { margin: .5rem 0 0; padding-left: 1.25rem; }
    li + li { margin-top: .4rem; }
  }
  .use-at-a-glance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
    margin: 1rem 0 0;

    div { border-radius: var(--radius-sm); padding: .75rem; background: var(--colour-wash); }
    dt { color: var(--colour-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    dd { margin: .2rem 0 0; font-weight: 700; }
  }
  .use-guide .rate-meaning { color: var(--colour-muted); font-size: .95rem; }
  .feedback-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
  .feedback-vote {
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-sm);
    padding: .65rem .9rem;
    background: var(--colour-paper);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;

    &:hover { border-color: var(--colour-accent); }
  }
  .feedback-comment { margin-top: 1rem; }
  .feedback-comment .button { margin-top: .75rem; }
  .feedback-error { color: var(--colour-accent); font-weight: 700; }
  .key-information {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-notice-line);
    border-left: 5px solid var(--colour-accent);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    background: var(--colour-notice);

    h2 { margin: 0; font-size: 1.2rem; }
    dl { margin: .75rem 0 0; }
    dt { color: var(--colour-muted); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    dd { margin: .25rem 0 0; font-weight: 650; }
    p { margin: .75rem 0 0; }
  }
  .label-summary {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--colour-wash);

    h2 { margin: 0; font-size: 1.35rem; }
    p { margin: .65rem 0 0; }
    .label-summary-provenance, .label-summary-note { color: var(--colour-muted); font-size: .9rem; }
  }
  .withholding-planner {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-notice-line);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--colour-notice);

    h2 { margin: 0; font-size: 1.35rem; }
    h3 { margin: 0; font-size: 1.1rem; }
    > p { margin: .65rem 0 0; }
    form { margin-top: 1rem; }
    label { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 700; }
    input, select { width: 100%; border: 1px solid var(--colour-input-line); border-radius: var(--radius-sm); padding: .65rem .75rem; background: var(--colour-paper); color: inherit; font: inherit; }
    .whp-additional { margin: 1rem 0; border: 1px solid var(--colour-notice-line); border-radius: var(--radius-sm); padding: .8rem 1rem 1rem; }
    .whp-additional summary { cursor: pointer; font-weight: 700; }
    .whp-additional summary span { color: var(--colour-muted); font-size: .9rem; font-weight: 400; }
    .whp-additional > p { margin: .75rem 0 0; color: var(--colour-muted); font-size: .9rem; }
    .whp-add-button { margin-top: .75rem; }
  }
  .whp-fields, .whp-application { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .whp-application { grid-template-columns: 1fr 1fr; margin-top: .75rem; }
  .whp-result { margin: 1rem 0; border: 1px solid var(--colour-line); border-radius: var(--radius-sm); padding: 1rem; background: var(--colour-paper); }
  .whp-result p { margin: .5rem 0 0; }
  .whp-result ul { margin: .75rem 0 0; padding-left: 1.25rem; }
  .whp-result li + li { margin-top: .5rem; }
  .whp-error { margin-top: 1rem; border: 1px solid var(--colour-accent); border-radius: var(--radius-sm); padding: .75rem 1rem; background: var(--colour-paper); color: var(--colour-accent); font-weight: 700; }
  .whp-note { color: var(--colour-muted); font-size: .9rem; }
  .processing-notice {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-notice-line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    background: var(--colour-notice);

    h2 { margin: 0; font-size: 1.2rem; }
    p { margin: .75rem 0 0; }
  }
  .product-qr {
    margin-block: 1.5rem;
    max-width: 19rem;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: var(--colour-paper);

    h2 { margin: 0; font-size: 1.2rem; }
    p { margin: .5rem 0 .85rem; }
    img { display: block; width: min(100%, 16rem); height: auto; image-rendering: pixelated; }
  }
  .documentation {
    max-width: 54rem;

    h2 { margin-top: 2rem; }
    ul { padding-left: 1.25rem; }
    li + li { margin-top: .45rem; }
    code { border-radius: .2rem; padding: .08rem .25rem; background: var(--colour-label-paper); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; overflow-wrap: anywhere; }
  }
  .limits-warning {
    margin-top: .75rem;
    border: 1px solid var(--colour-notice-line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    background: var(--colour-notice);
    font-weight: 700;

    p { margin: 0; }
  }
  .validation-status {
    margin-block: 1.5rem;
    border: 1px solid var(--colour-notice-line);
    border-left: 5px solid var(--colour-accent);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    background: var(--colour-notice);

    h2 { font-size: 1.15rem; }
    p { margin-top: .5rem; }
    ul { margin: .75rem 0 0; padding-left: 1.25rem; }
    li + li { margin-top: .35rem; }
  }
  .label-page { overflow-wrap: anywhere; border: 1px solid var(--colour-line); border-radius: .4rem; padding: 1rem; background: var(--colour-label-paper); white-space: pre-wrap; }

  .active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin: 0;

    p { margin: 0; }
    ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
    li { margin: 0; }
    li a { display: block; border: 1px solid var(--colour-line); border-radius: 999px; padding: .3rem .65rem; background: var(--colour-wash); font-size: .9rem; }
    .facet-actions { margin-left: auto; font-size: .9rem; }
  }

  .primary-search {
    max-width: var(--measure);
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    background: var(--colour-wash);

    label { display: block; margin-bottom: .75rem; font-size: 1.1rem; font-weight: 700; }
    div { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.25rem; }
    input { flex: 1 1 20rem; min-width: 0; border: 1px solid var(--colour-input-line); border-radius: var(--radius-sm); padding: .72rem .8rem; background: var(--colour-paper); color: inherit; font: inherit; }
    p { margin: .85rem 0 0; color: var(--colour-muted); font-size: .92rem; }
  }

  .primary-search > div { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.25rem; }
  .primary-search input[type="search"] { flex: 1 1 20rem; min-width: 0; min-height: 3.5rem; border: 1px solid var(--colour-input-line); border-radius: var(--radius-sm); padding: .85rem 1rem; background: var(--colour-paper); color: inherit; font: inherit; font-size: 1.1rem; }
  .primary-search .button { min-height: 3.5rem; padding-inline: 1.25rem; }

  .filter-step {
    margin: 0;
    border: 1px solid var(--colour-line);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--colour-wash);
    animation: filter-step-in .24s ease-out;

    h2 { margin: .3rem 0 1rem; font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
    ul { display: flex; flex-wrap: wrap; gap: .65rem; margin: 0; padding: 0; list-style: none; }
    a { display: block; border: 1px solid var(--colour-line); border-radius: 999px; padding: .45rem .75rem; background: var(--colour-paper); }
    .filter-progress { margin: 0; color: var(--colour-muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .facet-summary { margin-top: .5rem; color: var(--colour-muted); font-size: .85rem; }
  }

  .search-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: baseline; }
  .search-summary p { margin: 0; }
  .filter-types { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; color: var(--colour-muted); }
  .filter-types a { border-bottom: 2px solid transparent; padding: .2rem .1rem; text-transform: capitalize; }
  .filter-types a.is-selected { color: var(--colour-accent); border-color: currentColor; }
  .filter-choice.is-selected { border-color: var(--colour-accent); background: var(--colour-accent); color: var(--colour-accent-contrast); }
  .filter-choice.is-selected small { color: inherit; }

  @keyframes filter-step-in { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: translateY(0); } }

  .result-count { margin-top: 2rem; color: var(--colour-ink); font-size: clamp(1.2rem, 2vw, 1.6rem); }
  .empty-results { margin-top: 1.5rem; color: var(--colour-muted); }
  .match-strength { display: inline-block; margin-top: .55rem; border-radius: 999px; padding: .2rem .55rem; background: var(--colour-wash); color: var(--colour-muted); font-size: .8rem; font-weight: 700; }
}

@layer components {
  #search-content {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
  }

  #search-content > * { margin-block: 0; }
}

@layer utilities {
  @media (max-width: 43.75rem) {
    body { font-size: 1rem; }
    .site-header { grid-template-columns: 1fr; gap: .75rem; }
    .primary-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
    .primary-nav :is(a, .nav-separator) { flex: 0 0 auto; }
    :is(.search-form, header form) { max-width: none; }
    .page { padding-top: 2rem; }
    .results { grid-template-columns: 1fr; }
    .notice { align-items: flex-start; }
    .fact-grid { grid-template-columns: 1fr; }
    .fact-grid div { border-right: 0; }
    .use-finder form { grid-template-columns: 1fr; }
    .whp-fields, .whp-application { grid-template-columns: 1fr; }
    :is(.button, header button) { padding-inline: .85rem; }
  }
}