/*
 * Clankdar's own mockup cards (the signed result, a puzzle, the scoring split,
 * the sample listing). The frames come from @hraness/design-kit/mockups.css;
 * these rules only style the content inside them and read its --hkm-* tokens,
 * so they follow the page's light or dark scheme the same way.
 */
.hkm-cdm-card {
  container-type: inline-size;
  border-radius: 14px;
  background: var(--hkm-card);
  box-shadow: var(--hkm-shadow);
  border: 1px solid var(--hkm-frame-line);
  color: var(--hkm-fg);
  font-family: var(--hkm-font);
}

.cdm-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 22px; overflow-wrap: anywhere; }
.cdm-sheet > * { min-inline-size: 0; }
.cdm-label { margin: 0; color: var(--hkm-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.cdm-question { margin: 0; font-size: 17px; line-height: 1.45; }
.cdm-headline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: 17px; font-weight: 600; }
.cdm-note { margin: 0; color: var(--hkm-muted); font-size: 13px; line-height: 1.45; }
.cdm-computed { margin: 0; font-size: 14px; }
.hkm-root code { font-family: var(--hkm-mono); font-size: 0.92em; }
.cdm-computed code, .cdm-replies code { padding: 2px 8px; border-radius: 6px; background: var(--hkm-field); font-weight: 600; }

.cdm-verdict {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--hkm-error) 14%, transparent);
  color: var(--hkm-error);
  font-family: var(--hkm-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cdm-verdict[data-pass] { background: color-mix(in oklab, var(--hkm-ok) 14%, transparent); color: var(--hkm-ok); }

.cdm-replies { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cdm-replies li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--hkm-line); border-radius: 10px; }
.cdm-agent { color: var(--hkm-muted); font-size: 14px; }

.cdm-program { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.cdm-program code { color: var(--hkm-fg); }
.cdm-inputs { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--hkm-surface); }
.cdm-inputs div { display: flex; gap: 10px; }
.cdm-inputs dt { min-width: 4.5em; color: var(--hkm-muted); font-family: var(--hkm-mono); font-size: 13px; }
.cdm-inputs dd { margin: 0; }

.cdm-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.cdm-table th { padding: 6px 8px; border-bottom: 1px solid var(--hkm-line); color: var(--hkm-muted); font-size: 12px; font-weight: 600; text-align: left; }
.cdm-table td { padding: 7px 8px; border-bottom: 1px solid var(--hkm-line); }
.cdm-table tr:last-child td { border-bottom: 0; }

.cdm-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 16px; }
.cdm-list { display: grid; gap: 6px; margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.cdm-list[data-tone="ok"] li::marker { color: var(--hkm-ok); }
.cdm-list[data-tone="muted"] { color: var(--hkm-muted); }

.cdm-listing { display: grid; gap: 16px; padding: 22px; background: var(--hkm-bg); color: var(--hkm-fg); font-family: var(--hkm-font); }
.cdm-listing-head { display: flex; gap: 12px; align-items: center; }
.cdm-listing-head p { margin: 0; }
.cdm-listing-name { font-size: 18px; font-weight: 700; }
.cdm-avatar { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in oklab, var(--hkm-accent) 18%, var(--hkm-card)); color: var(--hkm-accent); font-weight: 700; }
.cdm-listing-check { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--hkm-line); border-radius: 12px; background: var(--hkm-card); }

@media (max-width: 480px) {
  .cdm-sheet, .cdm-listing { padding: 16px; }
}

/* Keep each score intact when a narrow card cannot support four columns. */
.cdm-cell-label { display: none; }
.cdm-tier { white-space: nowrap; }
@container (max-width: 20rem) {
  .cdm-table, .cdm-table tbody { display: block; }
  .cdm-table thead { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .cdm-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: 12px; border-top: 1px solid var(--hkm-line); }
  .cdm-table td { display: grid; align-content: start; justify-items: start; gap: 4px; min-inline-size: 0; padding: 0; border: 0; }
  .cdm-cell-label { display: block; color: var(--hkm-muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
}