@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select { font: inherit; }
}

@layer base {
  :root {
    color-scheme: light dark;
    --paper: #f2f0e9;
    --surface: #fcfbf7;
    --ink: #15201f;
    --muted: #5b6765;
    --line: #b8c1bd;
    --accent: #087f73;
    --accent-ink: #f6fffd;
    --danger: #a13029;
    --measure: 78rem;
    --space: clamp(1rem, 2.5vw, 2.5rem);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  :root[data-theme="dark"] {
    --paper: #111716;
    --surface: #18201f;
    --ink: #edf4f1;
    --muted: #abb9b5;
    --line: #42504d;
    --accent: #54d8c7;
    --accent-ink: #08211e;
    --danger: #ff8e86;
  }

  html { scroll-behavior: smooth; }
  body {
    min-block-size: 100svh;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
  }
  a { color: var(--accent); }
  button, input, select {
    border: 1px solid var(--line);
    border-radius: .25rem;
    background: var(--surface);
    color: var(--ink);
  }
  button { min-block-size: 2.75rem; padding-inline: 1rem; cursor: pointer; }
  button:hover { border-color: var(--accent); }
  :focus-visible { outline: .2rem solid var(--accent); outline-offset: .2rem; }
}

@layer layout {
  .masthead, main, .no-script {
    inline-size: min(100% - 2 * var(--space), var(--measure));
    margin-inline: auto;
  }
  .masthead {
    display: flex;
    justify-content: space-between;
    gap: var(--space);
    align-items: end;
    padding-block: clamp(3rem, 9vw, 7rem) var(--space);
    border-block-end: 1px solid var(--line);
  }
  .masthead > div { max-inline-size: 48rem; }
  .masthead h1 { max-inline-size: 12ch; font-size: clamp(2.8rem, 8vw, 7rem); line-height: .92; letter-spacing: -.065em; }
  .masthead > div > p:last-child { max-inline-size: 46rem; margin-block-start: 1.5rem; color: var(--muted); }
  main { padding-block-end: 5rem; }
  .controls, .comparison { display: grid; grid-template-columns: minmax(12rem, .7fr) 2fr; gap: var(--space); padding-block: var(--space); border-block-end: 1px solid var(--line); }
  .controls form { display: grid; grid-template-columns: 2fr 1fr auto; gap: 1rem; align-items: end; }
  .workspace-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr); }
  .catalog { container-type: inline-size; padding-block: var(--space); padding-inline-end: var(--space); }
  .selection { padding: var(--space); border-inline-start: 1px solid var(--line); }
  .selection p { margin-block-start: .75rem; }
  .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
  .table-scroll { overflow-x: auto; }
  table { inline-size: 100%; min-inline-size: 42rem; border-collapse: collapse; }

  @media (max-width: 52rem) {
    .masthead, .section-heading { align-items: start; flex-direction: column; }
    .controls, .comparison, .workspace-grid { grid-template-columns: 1fr; }
    .controls form { grid-template-columns: 1fr; }
    .catalog { padding-inline-end: 0; }
    .selection { border-inline-start: 0; border-block-start: 1px solid var(--line); padding-inline: 0; }
  }
}

@layer components {
  .skip-link { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 10; translate: 0 -150%; background: var(--accent); color: var(--accent-ink); padding: .75rem 1rem; }
  .skip-link:focus { translate: 0; }
  .eyebrow, .section-index { color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
  .field { display: grid; gap: .35rem; }
  .field label { color: var(--muted); font-size: .85rem; }
  .field input, .field select { inline-size: 100%; min-block-size: 2.75rem; padding-inline: .75rem; }
  .status { min-block-size: 1.6em; margin-block: 1rem; color: var(--muted); }
  .status[data-error="true"] { color: var(--danger); }
  .results { padding: 0; margin: 0; list-style: none; }
  .result { display: grid; grid-template-columns: subgrid; padding-block: 1.25rem; border-block-start: 1px solid var(--line); }
  .result article { display: grid; grid-template-columns: minmax(10rem, .6fr) minmax(12rem, 1fr) auto; gap: 1rem; align-items: center; }
  .result h3 { font-size: clamp(1.2rem, 3cqi, 1.8rem); line-height: 1.15; }
  .result p { color: var(--muted); }
  .result-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: end; }
  .result-actions button[data-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .empty { padding-block: 3rem; color: var(--muted); border-block-start: 1px solid var(--line); }
  th, td { padding: .85rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
  thead th { color: var(--muted); font-size: .8rem; }
  tbody th { color: var(--accent); }
  dialog { inline-size: min(38rem, calc(100% - 2rem)); border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--ink); padding: clamp(1.25rem, 4vw, 2.5rem); }
  dialog::backdrop { background: rgb(4 15 14 / .7); backdrop-filter: blur(.2rem); }
  dialog h2 { margin-block-end: 1rem; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
  dialog dl { display: grid; grid-template-columns: 8rem 1fr; margin-block: 1.5rem; }
  dialog dt, dialog dd { padding-block: .4rem; border-block-end: 1px solid var(--line); }
  dialog dd { margin: 0; }
  dialog form { display: flex; justify-content: end; }
  .no-script { margin-block: 2rem; padding: var(--space); border: 1px solid var(--danger); }

  @container (max-width: 38rem) {
    .result article { grid-template-columns: 1fr; }
    .result-actions { justify-content: start; }
  }
}

@layer utilities {
  [hidden] { display: none !important; }
  .result { animation: enter .28s ease-out both; }
  @keyframes enter { from { opacity: 0; translate: 0 .5rem; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}