body {
  padding: var(--size-5);
}

header {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

main {
  width: 100%;
  max-width: var(--prose-md);
  margin-inline: auto;
  padding-block: var(--size-8) var(--size-16);

  h1 {
    font-size: var(--scale-fluid-5);
    letter-spacing: var(--letter-sm);
    margin-bottom: var(--size-2);
  }

  .intro {
    color: var(--muted-foreground);
    margin-bottom: var(--size-8);
  }

  h2 {
    font-size: var(--scale-2);
    letter-spacing: var(--letter-sm);
    margin-bottom: var(--size-4);
  }
}

/* Model type-ahead. Unlike the home search the results sit in normal flow
   below the field (they're the page's primary content, not a popup). */
#device-search {
  .device-search-field {
    position: relative;

    /* magnifier sits inside the input; the input pads left to clear it */
    > .icon {
      position: absolute;
      left: var(--size-3);
      top: 50%;
      translate: 0 -50%;
      color: var(--muted-foreground);
      pointer-events: none;
    }
  }

  input[type="search"] {
    appearance: none;
    width: 100%;
    padding: var(--size-3) var(--size-4);
    padding-inline-start: var(--size-10);
    color: var(--foreground);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    &::placeholder {
      color: var(--muted-foreground);
    }
  }
}

#device-results {
  margin-top: var(--size-3);

  .device-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
  }

  .device-list li {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .device-glyph {
    display: inline-flex;
    color: var(--muted-foreground);
  }

  .device-info {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    flex: 1;
    min-width: 0;
  }

  .device-name {
    font-weight: var(--weight-semibold);
  }

  .device-note {
    font-size: var(--scale-00);
    color: var(--muted-foreground);
  }

  .device-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    white-space: nowrap;
    font-size: var(--scale-00);
    font-weight: var(--weight-medium);
    color: var(--success);

    .icon {
      color: var(--success);
    }
  }

  /* no-match fallback: a quiet card that points at the universal check */
  .device-empty {
    display: flex;
    align-items: flex-start;
    gap: var(--size-3);
    padding: var(--size-4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--muted-foreground);

    .device-glyph {
      flex-shrink: 0;
    }

    strong {
      color: var(--foreground);
    }
  }
}

/* the two universal checks, side by side, stacking on phones */
.checks {
  margin-top: var(--size-12);
}

.check-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-4);
}

.check {
  padding: var(--size-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);

  .check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-10);
    height: var(--size-10);
    font-size: var(--scale-2);
    color: var(--primary-muted-foreground);
    background-color: var(--primary-muted);
    border-radius: var(--radius-md);
    margin-bottom: var(--size-3);
  }

  h3 {
    font-size: var(--scale-1);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--size-2);
  }

  p {
    color: var(--muted-foreground);
  }

  strong {
    color: var(--foreground);
  }

  ul {
    list-style: disc;
    padding-left: var(--size-5);
    margin-top: var(--size-2);
    color: var(--muted-foreground);

    li {
      margin-bottom: var(--size-1);
    }
  }
}

/* the two caveats a model lookup can't answer */
.caveats {
  margin-top: var(--size-12);

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
  }

  li {
    display: flex;
    align-items: flex-start;
    gap: var(--size-3);
    color: var(--muted-foreground);
  }

  .caveat-icon {
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--muted-foreground);
  }

  strong {
    color: var(--foreground);
  }
}

.cta {
  margin-top: var(--size-12);
  padding: var(--size-6);
  background-color: var(--surface);
  color: var(--surface-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);

  p {
    margin: 0;
  }

  a {
    color: var(--primary);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

@media (max-width: 600px) {
  .check-cards {
    grid-template-columns: 1fr;
  }
}