/* Blocksmith "try it yourself": one idea, every size, before and after training. Builds on play.css. */
.tlayout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "compose" "stage" "grid" "facts"; }
.tcompose { grid-area: compose; min-width: 0; display: grid; gap: 14px; align-content: start; }
.tstage { grid-area: stage; height: clamp(240px, min(calc(100vw - 32px), 40svh), 460px); }
.tgrid { grid-area: grid; min-width: 0; display: grid; gap: 10px; align-content: start; }
.tfacts { grid-area: facts; align-content: start; }
@media (min-width: 900px) {
  .tlayout { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "compose grid" "stage grid" "facts grid"; gap: 20px 30px; }
  .tstage { height: clamp(300px, 42vh, 460px); }
}
.ask textarea { min-height: 52px; }

.thead, .row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.thead span { font: 500 11px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.rows { display: grid; gap: 10px; }
.rlabel { display: grid; align-content: center; gap: 2px; min-width: 0; }
.rlabel b { font: 600 17px/1.1 "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif; color: var(--accent-text); }
.rlabel span { font-size: 11.5px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; }
.row.extra .card.solo { grid-column: 2 / span 2; }
.row.extra .card.solo .pic { aspect-ratio: 8 / 3; }

.card {
  position: relative; display: grid; grid-template-rows: auto auto; min-width: 0; padding: 0; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); color: var(--fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { border-color: var(--line-2); }
.card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.card:disabled { cursor: default; }
.pic { aspect-ratio: 4 / 3; max-width: 100%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, var(--stage-1), var(--stage-2)); }
.pic { position: relative; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.pic .big { font: 600 clamp(20px, 6vw, 28px)/1 "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.card.busy .pic .big { color: var(--accent-text); }
.meta { display: grid; gap: 1px; padding: 7px 9px 8px; min-width: 0; }
.mname { font-size: 12px; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mstat { font-size: 13px; line-height: 1.3; font-weight: 500; min-height: 1.3em; overflow-wrap: anywhere; }
.mstat .t { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; }
.card.ok .mstat .tick { color: var(--ok); font-weight: 700; }
.card.warn .mstat { color: var(--warn); }
.card.bad .mstat, .card.down .mstat { color: var(--bad); }
.card.down .pic .big { font-size: 15px; font-weight: 500; }

.thumbmaker { position: fixed; left: -10000px; top: 0; width: 320px; height: 240px; pointer-events: none; }
.thumbmaker > div { width: 320px; height: 240px; }

@media (max-width: 420px) {
  .thead, .row { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .rlabel b { font-size: 15px; }
  .meta { padding: 6px 7px 7px; }
}
@media (min-width: 900px) {                  /* wide screens: flatter pictures, so the whole grid fits better */
  .pic { aspect-ratio: 16 / 10; }
  .row.extra .card.solo .pic { aspect-ratio: 32 / 10; }
}