/* ============================================================
   making-space/ai-playground/keep-ai-honest/keep-ai-honest.css
   PLAY1: "How to keep AI honest" and its invite-only details page.
   Loaded AFTER /making-space/ai-playground/ai-playground.css, which
   supplies the blue retint (body[data-package="ai-playground"]) and,
   with making-space.css, .wrap / .sec / .sec-head / .eyebrow /
   .close-cta / .back-link / .reveal. Everything here is unique to
   the two pages: the self-check, the step cards, the details tables.

   Type: reading copy is 17-19px, nothing under 16px (CLAUDE.md #9).
   No OS motion gate anywhere (CLAUDE.md #6); nothing here moves on
   its own.
   ============================================================ */

.kh-hero{max-width:820px}
.kh-hero h1{font-size:clamp(38px,6.6vw,66px);line-height:1.02}
.kh-hero .lead{max-width:60ch}

/* ---- the self-check ---- */
.kh-check{max-width:820px;margin:0 auto;padding:clamp(22px,3.4vw,34px);border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--tint) 34%,var(--line));
  background:color-mix(in srgb,var(--tint) 7%,transparent)}
.kh-check fieldset{border:0;min-width:0}
.kh-check legend{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em;line-height:1.15;color:var(--ink);margin-bottom:6px}
.kh-check .kh-hint{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0 0 16px}
.kh-tick{display:flex;align-items:flex-start;gap:14px;min-height:48px;padding:11px 10px;border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink)}
.kh-tick:hover{background:color-mix(in srgb,var(--tint) 10%,transparent)}
.kh-tick input{flex:none;width:24px;height:24px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.kh-tick input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.kh-result{margin-top:18px;padding:18px 20px;border-radius:var(--r-sm);border-left:4px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink)}
.kh-result[hidden]{display:none}
.kh-result strong{font-weight:700}
.kh-result a{color:var(--accent);font-weight:600;text-underline-offset:3px}

/* ---- the steps ---- */
.kh-steps{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.kh-step{position:relative;padding:clamp(22px,3.4vw,34px);border-radius:var(--r-md);border:1px solid var(--line);
  background:color-mix(in srgb,var(--page-bg2) 60%,transparent);scroll-margin-top:96px}
.kh-step:target,.kh-step.is-next{border-color:color-mix(in srgb,var(--tint) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 16%,transparent)}
.kh-num{display:block;font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--tint);margin-bottom:8px}
.kh-step h3{font-family:var(--display);font-size:clamp(23px,3.2vw,30px);font-weight:800;letter-spacing:-.015em;line-height:1.15;color:var(--ink);margin-bottom:10px}
.kh-idea{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.3vw,22px);line-height:1.5;color:var(--ink);margin-bottom:18px}
.kh-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.kh-cols>div{min-width:0}
.kh-label{display:block;font-family:var(--mono);font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.kh-cols p{font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--ink-soft)}
.kh-move{padding:14px 16px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.kh-move p{color:var(--ink)}

/* ---- prose blocks (where this comes from, details sections) ---- */
.kh-prose{max-width:720px;margin:0 auto}
.kh-prose p,.kh-prose li{font-family:var(--serif);font-size:18px;line-height:1.7;color:var(--ink-soft)}
.kh-prose p+p{margin-top:16px}
.kh-prose strong{color:var(--ink)}
.kh-prose a{color:var(--accent);text-underline-offset:3px}
.kh-prose ul,.kh-prose ol{margin:14px 0 0 1.3em;display:flex;flex-direction:column;gap:10px}
.kh-prose h3{font-family:var(--display);font-size:clamp(21px,2.8vw,26px);font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin:34px 0 10px}
.kh-prose h3:first-child{margin-top:0}
.kh-num-live{font-family:var(--mono);font-size:1em;font-weight:600;color:var(--ink)}
.kh-reviewed{max-width:720px;margin:26px auto 0;text-align:center;font-family:var(--mono);font-size:16px;letter-spacing:.03em;color:var(--ink-faint)}

/* ---- the invitation to the details page ---- */
.kh-invite{max-width:720px;margin:0 auto;padding:clamp(22px,3.4vw,32px);border-radius:var(--r-md);text-align:center;
  border:1px dashed color-mix(in srgb,var(--tint) 50%,var(--line))}
.kh-invite p{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ink-soft);max-width:52ch;margin:0 auto 18px}
.kh-invite a.kh-btn,.kh-btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:12px 22px;border-radius:999px;
  font-family:var(--mono);font-size:16px;letter-spacing:.04em;text-decoration:none;color:var(--nav-ink);
  border:1px solid var(--nav-hairline);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.kh-btn:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.kh-ask{display:block;margin-top:14px;font-family:var(--mono);font-size:16px;letter-spacing:.03em}
.kh-ask a{color:var(--ink-faint);text-underline-offset:3px}
.kh-ask a:hover{color:var(--accent)}

/* ---- details page ---- */
.kh-banner{max-width:820px;margin:0 auto 34px;padding:14px 18px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--accent-2) 55%,var(--line));
  background:color-mix(in srgb,var(--accent-2) 10%,transparent);font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--ink)}
.kh-table-wrap{max-width:820px;margin:20px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.kh-table{width:100%;border-collapse:collapse;font-family:var(--serif);font-size:17px;line-height:1.5}
.kh-table caption{text-align:left;font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--ink-faint);padding-bottom:8px}
.kh-table th,.kh-table td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink-soft)}
.kh-table th{font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--ink);font-weight:600}
.kh-table td.n,.kh-table th.n{text-align:right;font-family:var(--mono);color:var(--ink);white-space:nowrap}
.kh-stats{max-width:820px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kh-stat{padding:18px 16px;border-radius:var(--r-md);border:1px solid var(--line);text-align:center;min-width:0}
.kh-stat b{display:block;font-family:var(--display);font-size:clamp(34px,5vw,46px);font-weight:800;line-height:1;color:var(--accent)}
.kh-stat span{display:block;margin-top:8px;font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--ink-soft)}
.kh-quiet{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-faint)}

@media (max-width:720px){
  .kh-cols{grid-template-columns:1fr}
  .kh-stats{grid-template-columns:1fr 1fr}
  .kh-tick{font-size:17px}
}