/* The AI slop check's rule catalogue: the preview block on /tools/ai-slop-check
 * and the full list at /tools/ai-slop-check/checks.
 *
 * External for the same reason tools.css is: two pages share it, so it caches
 * once, and it keeps both of them free of an inline <style> under a
 * `style-src 'self'` policy. Everything here is tokens and type sizes taken
 * from tools.css, not new ones: the item title matches `.issues b`, the
 * description matches `.issues span`, and the mono labels match `.brow`.
 *
 * Every .check-stage is a deliberate reproduction of a tell the checker looks
 * for, so these two pages contain the patterns they describe on purpose. The
 * stages are the only place they appear.
 */

/* ---- the group nav ------------------------------------------------------ */

/* Sticky against <main> rather than the page head: inside the head it would
   unstick the moment the head scrolled away. `top` clears the site nav. */
.grouplist {
  position: sticky;
  top: 60px;
  z-index: 40;
  padding: 14px 0 15px;
  background: var(--bg);
}

.grouplist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grouplist a {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--fg-muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.grouplist a:hover {
  border-color: var(--border-strong);
  background: var(--bg-soft);
  color: var(--fg);
}

/* The group being read. Same treatment /checks gives a selected filter tab, so
   a reader who has met one already knows what it means. read.js sets it. */
.grouplist a[aria-current] {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

/* one line that scrolls, rather than three rows pinned to the top of a phone */
@media (max-width: 900px) {
  .grouplist ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .grouplist ul::-webkit-scrollbar {
    display: none;
  }
}

/* ---- a group ------------------------------------------------------------ */

/* The groups carry no rule between them: their headings already separate them,
   and the sticky head beside each one says which group you are in. */
.group {
  padding: 44px 0;
  border-top: 0;
}

.group + .group {
  border-top: 0;
}

/* clears the site nav and the group nav together */
.group[id] {
  scroll-margin-top: 132px;
}

@media (max-width: 720px) {
  .group {
    padding: 32px 0;
  }
}

/* ---- one check ---------------------------------------------------------- */

/* Wider than the 248 these sat at inside the split skeleton: the grid has the
   whole measure now, so the same minimum would only buy more columns of the
   same narrow card. At 300 the full-width row holds four, each ~330px, which
   is a specimen you can actually read. */
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.check {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}

/* The way back to the reading, one per group. `.peek-more`'s dashed panel at a
   tile's size: it is one more cell of the grid, so its width is a column and
   its height is the row the specimens beside it set, and nothing about its
   size is its own. The words share `.peek-more`'s rules below. */
.check-run {
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 22px;
  /* --border-strong is a whisper on the dark paper; the dashes have to read as
     a box on their own, before anyone hovers. */
  border-style: dashed;
  border-color: var(--fg-subtle);
  background: transparent;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.check-run:hover {
  border-color: var(--fg);
  background: var(--bg-soft);
}

/* the site's own button, white on the dark paper, so the way in looks like the
   way in everywhere else on the site */
.check-run .btn {
  margin-top: 6px;
}

/* The stage sets its own colours, because several of these tells ARE a colour
   choice. `content-visibility` keeps the stages that are off screen out of the
   paint, and the fixed height makes the placeholder size exact so nothing
   shifts as they scroll into view. */
.check-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 180px;
  padding: 18px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  contain: layout paint style;
  content-visibility: auto;
  /* must track the height above, or a stage that has not painted yet reserves
     the wrong space and the grid shifts as it scrolls in */
  contain-intrinsic-size: auto 180px;
  font-size: 12px;
  line-height: 1.4;
}

.check-body {
  flex: 1;
  padding: 17px 19px 20px;
}

/* the sizes `.issues` uses for a titled item and its explanation */
.check-body h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--fg);
}

.check-body p {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-muted);
}

@media (max-width: 560px) {
  .checks {
    grid-template-columns: 1fr;
  }
}

/* ---- the preview block on the tool page --------------------------------- */

/* Its own head above a full-width grid rather than `.section-split`: at 7fr of
   that skeleton each of the four columns is 199px, which is narrower than a
   specimen can be read at. The catalogue's group headings use it too, for the
   same reason. */
.checks-head {
  max-width: 640px;
  margin-bottom: 34px;
}


.peek {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* The fourth column is one tall panel beside the three rows rather than a tile
   in each of them: three of the four cells it would otherwise leave empty. */
.peek-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  grid-column: 4;
  /* `span 3`, not `1 / -1`: the rows here are implicit, and -1 resolves against
     the last explicit line, which leaves the panel one row tall. */
  grid-row: 1 / span 3;
  padding: 24px 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.peek-more:hover {
  border-color: var(--fg-subtle);
  background: var(--bg-soft);
}

.peek-more b,
.check-run b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.peek-more p,
.check-run p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.peek-more span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--fg);
}

.peek-more svg,
.check-run svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.peek-more:hover svg,
.check-run:hover svg {
  transform: translateX(3px);
}

/* Two columns of checks and the panel across the foot: at three columns the
   panel is narrower than the tiles it sits beside, which reads as a gap. */
@media (max-width: 1100px) {
  .peek {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .peek-more {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
  }

  .peek-more p {
    display: none;
  }
}

@media (max-width: 560px) {
  .peek {
    grid-template-columns: 1fr;
  }
}

/* ---- the specimens ------------------------------------------------------ */

.x-bento {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 6px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.x-bento i {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.x-bento i:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
.x-bento i:nth-child(4) {
  grid-column: span 2;
}

/* a gradient painted already blurred, rather than a filter the compositor
   re-runs: the effect is the same and it costs no raster pass */
.x-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.85;
}
.x-blob-a {
  top: -8px;
  left: -4px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #8b5cf6 0%, rgb(139 92 246 / 55%) 42%, rgb(139 92 246 / 0%) 70%);
}
.x-blob-b {
  right: -2px;
  bottom: -10px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, #22d3ee 0%, rgb(34 211 238 / 55%) 42%, rgb(34 211 238 / 0%) 70%);
}
.x-over {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.x-grad {
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #a855f7);
}
.x-grad span {
  display: grid;
  height: 100%;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.x-logos {
  display: grid;
  gap: 12px;
  width: 100%;
  text-align: center;
}
.x-logos b {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.x-logos div {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.x-logos i {
  width: 44px;
  height: 15px;
  border-radius: 4px;
  background: var(--border-strong);
}

.x-three {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.x-three i {
  position: relative;
  display: block;
  height: 86px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
}
.x-three i::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.x-three i::after {
  content: '';
  position: absolute;
  top: 42px;
  right: 10px;
  left: 10px;
  height: 6px;
  border-radius: 3px;
  background: var(--border-strong);
}

.x-neon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  background: #08090d;
}
.x-neon b {
  font-size: 15px;
  font-weight: 600;
  color: #39ff14;
  text-shadow: 0 0 12px #39ff1499;
}
.x-neon i {
  font-size: 11px;
  font-style: normal;
  color: #00e5ff;
}

.x-stripe {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 6px solid #8b5cf6;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--bg-elev);
}
.x-stripe b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.x-stripe span {
  font-size: 11.5px;
  color: var(--fg-subtle);
}

.x-gradtext {
  background: linear-gradient(90deg, #6366f1, #d946ef);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-align: center;
}

.x-hair {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  box-shadow: 0 22px 44px rgb(0 0 0 / 55%);
  font-weight: 500;
  color: var(--fg);
  text-align: center;
}

.x-face {
  text-align: center;
  color: var(--fg);
}
.x-face b {
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.x-face span {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-subtle);
}

.x-tiles {
  display: grid;
  gap: 12px;
  width: 100%;
}
.x-tiles div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.x-tiles i {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}
.x-tiles b {
  display: block;
  width: 84px;
  height: 7px;
  border-radius: 4px;
  background: var(--border-strong);
}

.x-caps {
  display: grid;
  gap: 7px;
  justify-items: center;
  text-align: center;
}
.x-caps b {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.x-caps span {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.x-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  font-weight: 500;
  color: var(--fg);
}
.x-glow {
  box-shadow: 0 0 32px 4px rgb(139 92 246 / 75%);
}

.x-halo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 26% 34%, rgb(168 85 247 / 55%), transparent 58%),
    radial-gradient(circle at 74% 68%, rgb(56 189 248 / 50%), transparent 58%);
}

.x-spot {
  position: absolute;
  inset: 0;
  background: #0b1020;
  background-image: radial-gradient(ellipse at center top, rgb(99 102 241 / 65%), transparent 62%);
}
.x-spot span {
  position: absolute;
  inset: auto 0 26px;
  font-weight: 500;
  color: #e7e9ff;
  text-align: center;
}

.x-graph {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 10%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 10%) 1px, transparent 1px);
  background-size: 18px 18px;
}

.x-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, var(--bg-soft) 0 9px, var(--bg-sunken) 9px 18px);
}

.x-thick {
  width: 100%;
  padding: 16px;
  border: 5px solid #6366f1;
  border-radius: 22px;
  background: var(--bg-elev);
  font-weight: 500;
  color: var(--fg);
  text-align: center;
}

.x-pill {
  display: grid;
  gap: 9px;
  justify-items: center;
  text-align: center;
}
.x-pill b {
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.x-pill span {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--fg);
}

.x-nest {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}
.x-nest div {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-soft);
}
.x-nest p {
  padding: 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg-elev);
  font-size: 11px;
  color: var(--fg-subtle);
}

.x-serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--fg);
  text-align: center;
}

.x-poster {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--fg);
  text-align: center;
}

.x-tight {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.11em;
  color: var(--fg);
}

.x-slogan {
  display: grid;
  gap: 7px;
  width: 100%;
  color: var(--fg);
  text-align: center;
}
.x-slogan b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.x-slogan span {
  font-size: 12px;
  color: var(--fg-muted);
}

.x-lead {
  width: 100%;
  font-size: 12px;
  line-height: 1.08;
  color: var(--fg-muted);
}

.x-small {
  width: 100%;
  color: var(--fg-muted);
  text-align: center;
}
.x-small b {
  display: block;
  font-size: 9px;
  font-weight: 400;
}
.x-small span {
  display: block;
  margin-top: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--fg-subtle);
}

.x-bounce i {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  animation: slop-bounce 1s infinite;
}
@keyframes slop-bounce {
  0%,
  100% {
    transform: translateY(-7px);
  }
  50% {
    transform: translateY(7px);
  }
}

.x-marquee {
  width: 100%;
  overflow: hidden;
}
.x-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: slop-slide 6s linear infinite;
}
.x-track i {
  flex: none;
  width: 60px;
  height: 20px;
  border-radius: 5px;
  background: var(--border-strong);
}
@keyframes slop-slide {
  to {
    transform: translateX(-50%);
  }
}

.x-pulse {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--fg-muted);
}
.x-pulse i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--safe);
  animation: slop-pulse 1.6s infinite;
}
@keyframes slop-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-bounce i,
  .x-track,
  .x-pulse i {
    animation: none;
  }
}

/* copy specimens read as a page's own text, so they are set as text */
.x-copy {
  width: 100%;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-muted);
}
.x-copy mark {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.x-copy b {
  font-weight: 500;
  color: var(--fg);
}

.x-emoji {
  display: grid;
  gap: 9px;
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.x-deco {
  width: 100%;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
  text-align: center;
}

/* several tells are not a look but a line in the source, or a line missing from
   it, so those are shown as the markup itself rather than mimed */
.x-term {
  width: 100%;
  padding: 11px 13px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  line-height: 1.65;
  color: var(--fg-muted);
}
.x-term b {
  font-weight: 400;
  color: var(--accent-deep);
}
.x-term span {
  color: var(--fg-subtle);
}
.x-term del {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.75;
}
.x-term em {
  font-style: normal;
  color: var(--danger);
}
.x-term u {
  text-decoration: none;
  color: var(--safe);
}

.x-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  width: 100%;
}
.x-img i {
  display: grid;
  place-items: center;
  height: 72px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-style: normal;
  color: var(--fg-subtle);
}

.x-links {
  display: grid;
  gap: 8px;
  width: 100%;
  font-size: 12.5px;
}
.x-links span {
  color: var(--fg-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}
.x-links b {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--danger);
}

.x-boxes {
  display: grid;
  gap: 7px;
  width: 100%;
}
.x-boxes i {
  display: block;
  height: 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 5px;
  background: var(--bg-elev);
}
.x-boxes b {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--fg-subtle);
  text-align: center;
}

.x-headings {
  display: grid;
  gap: 8px;
  width: 100%;
}
.x-headings b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.x-headings i {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-style: normal;
  color: var(--fg-subtle);
}
.x-headings .skip {
  color: var(--danger);
}

.x-favicon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--bg-elev);
}
.x-favicon i {
  display: grid;
  flex: none;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px dashed var(--border-strong);
  border-radius: 3px;
  background: var(--bg-sunken);
}
.x-favicon span {
  font-size: 12px;
  white-space: nowrap;
  color: var(--fg-muted);
}