/* letslab - calm-ui, "mono" theme with the letslab green as the single accent.
   Tokens below are the calm-ui tokens (tokens.css), trimmed to what this page uses. Only this block holds colour literals. */
/* calm-lint: allow-file no-hex */

:root {
  color-scheme: dark;
  /* surfaces: separated by tone, never by borders */
  --c-page: #050506;
  --c-surface: #0f0f11;
  --c-raised: #19191c;
  --c-line: rgba(255, 255, 255, .07);
  /* ink */
  --c-page-ink: #f4f4f3;
  --c-page-ink-2: rgba(244, 244, 243, .6);
  --c-ink: #f4f4f3;
  --c-ink-2: rgba(244, 244, 243, .6);
  --c-ink-3: rgba(244, 244, 243, .5);
  /* the one accent: letslab green (also "pass") */
  --c-accent: #3ddc84;
  --c-on-accent: #04170b;
  --c-brand: #3ddc84;
  --c-pos: #3ddc84;
  --c-warn: #f5b84b;
  --c-neg: #ff5c5c;

  --r-xs: 8px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-hero: clamp(40px, 5.2vw, 64px);
  --t-head: 15px;
  --t-body: 14px;
  --t-meta: 12px;
  --t-label: 10.5px;
  --t-display: clamp(44px, 8vw, 96px);
  --g-item: var(--s-3);
  --g-block: var(--s-8);

  --m-fast: 120ms;
  --m-base: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-page);
  color: var(--c-page-ink);
  font: 400 var(--t-head)/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

/* page: nav, hero and footer sit straight on the page */
.wrap {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--s-6) var(--s-4) var(--s-10);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-head);
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand::before {
  content: "";
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-brand);
}

.hero {
  padding-block: clamp(48px, 10vw, 96px) var(--g-block);
  text-align: center;
}

h1 {
  margin: 0 auto;
  max-width: 14ch;
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.lead {
  margin: var(--s-5) auto 0;
  max-width: 46ch;
  color: var(--c-page-ink-2);
  font-size: var(--t-head);
}

/* the one action: a pill well with the primary pill inside */
.search {
  display: flex;
  gap: var(--s-2);
  max-width: 560px;
  margin-inline: auto;
  padding: var(--s-2);
  background: var(--c-raised);
  border-radius: var(--r-pill);
  transition: box-shadow var(--m-base) var(--ease);
}
.search:focus-within { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.search:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--c-neg); }

.search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  outline: none;
}
.search input::placeholder { color: var(--c-ink-3); }

.search button {
  min-height: 44px;
  padding-inline: var(--s-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--m-fast) var(--ease), opacity var(--m-fast) var(--ease);
}
.search button:active { transform: scale(.97); }
.search button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.search button:disabled { opacity: .5; cursor: progress; transform: none; }
.search button[aria-busy="true"] { animation: working 1.2s var(--ease) infinite alternate; }

@keyframes working { to { opacity: .8; } }

.message {
  min-height: 1.5em;
  margin: var(--s-3) auto var(--g-block);
  max-width: 560px;
  padding-inline: var(--s-4);
  color: var(--c-page-ink-2);
  font-size: var(--t-body);
  text-align: center;
}
.message.error { color: var(--c-neg); }

/* report: one card, the score is its hero */
.result {
  padding: var(--s-6);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  animation: arrive var(--m-base) var(--ease);
}
.result[hidden] { display: none; }

@keyframes arrive { from { opacity: 0; transform: translateY(var(--s-2)); } }

.summary { display: grid; gap: var(--s-1); justify-items: start; }
.label {
  margin: 0;
  color: var(--c-ink-3);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.score-line { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; }
.score {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.score-of { color: var(--c-ink-3); font-size: var(--t-head); }
.result[data-tone="pass"] .score { color: var(--c-pos); }
.result[data-tone="warn"] .score { color: var(--c-warn); }
.result[data-tone="fail"] .score { color: var(--c-neg); }

.grade-line { margin: var(--s-2) 0 0; }
.final-url, .meta {
  margin: 0;
  max-width: 100%;
  color: var(--c-ink-2);
  font-size: var(--t-meta);
  overflow-wrap: anywhere;
}
.final-url { margin-top: var(--s-2); }

/* list rows: hairlines between rows only */
.checks { list-style: none; margin: var(--g-block) 0 0; padding: 0; }
.checks li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.checks li[hidden] { display: none; }
.check-title { font-size: var(--t-head); font-weight: 600; overflow-wrap: anywhere; }
.check-detail {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--t-body);
  overflow-wrap: anywhere;
}
.check-fix-tip {
  grid-column: 1 / -1;
  margin: var(--s-2) 0 0;
  padding: var(--s-3) var(--s-4);
  background: var(--c-raised);
  border-left: 3px solid var(--c-warn);
  border-radius: var(--r-xs);
  color: var(--c-ink);
  font-size: var(--t-body);
  overflow-wrap: anywhere;
}
.checks .pill { grid-column: 2; grid-row: 1; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-meta);
  font-weight: 600;
  white-space: nowrap;
}
.pill.pass { color: var(--c-pos); background: color-mix(in srgb, var(--c-pos) 14%, transparent); }
.pill.warn { color: var(--c-warn); background: color-mix(in srgb, var(--c-warn) 14%, transparent); }
.pill.fail { color: var(--c-neg); background: color-mix(in srgb, var(--c-neg) 14%, transparent); }
.pill.grade { color: var(--c-ink); background: var(--c-raised); }

.more {
  display: block;
  min-height: 40px;
  margin: var(--s-2) auto 0;
  padding-inline: var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-raised);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  cursor: pointer;
}
.more[hidden] { display: none; }
.more:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* footer: on the page, quiet */
.footer {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--s-6) var(--s-4) var(--s-8);
  color: var(--c-page-ink-2);
  font-size: var(--t-meta);
  text-align: center;
}
.footer p { margin: 0 0 var(--s-1); }
.footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--m-fast) var(--ease);
}
.footer a:hover { color: var(--c-page-ink); }
.footer a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-xs); }

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

@media (max-width: 480px) {
  .search button { padding-inline: var(--s-5); }
  .result { padding: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}