/* ============================================================
   Sudoception — mock.css
   The in-page "product" pieces: the hero grid card, metric cards,
   the leaderboard sketch, and the device frames with their
   screenshot slots. All CSS, no images. Values from the prototype.
   ============================================================ */

/* ---------- GRID CARD (used by scripts/og-image.html) ---------- */
.grid-card { padding: 26px; }
.grid-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
.grid-card__date { font-size: 13px; font-weight: 600; color: var(--muted); }
.grid-card__time { font-family: var(--serif); font-size: 22px; font-variant-numeric: tabular-nums; }
.grid-card__time small { font-size: 13px; color: var(--faint); font-family: var(--sans); }
.grid-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.grade-pill {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  color: #4A6B10; background: rgba(200,240,58,.9);
}

/* 9×9 as 3×3 boxes of 3×3 cells */
.grid-mini {
  --cell: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: var(--gridBg); padding: 8px; border-radius: 16px;
}
.grid-mini__box { display: grid; grid-template-columns: repeat(3, var(--cell)); grid-auto-rows: var(--cell); gap: 2px; }
.grid-mini__box i {
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  font-family: var(--serif); font-style: normal; font-size: 19px; font-variant-numeric: tabular-nums;
  background: var(--cellBg); border: 1px solid var(--cellBorder);
}
.grid-mini__box i.given { color: var(--text); font-weight: 500; }
.grid-mini__box i.entry { color: var(--entry); font-weight: 600; }
.grid-mini__box i.hl { background: rgba(200,240,58,.28); box-shadow: inset 0 0 0 1.5px #C8F03A; }
/* Phones: the card is 9 cells + 76px of gaps and padding wide, so size the
   cell from the viewport rather than let it push the hero grid wider. */
@media (max-width: 480px) {
  .grid-mini { --cell: clamp(20px, calc((100vw - 140px) / 9), 36px); }
  .grid-mini__box i { font-size: 15px; }
  .grid-card { padding: 18px; }
}

/* ---------- METRIC CARDS (Insights) ---------- */
.metric { border-radius: 18px; padding: 20px; background: var(--glass1); border: 1px solid var(--border); }
.metric__k { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.metric__v { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--indigoInk); font-variant-numeric: tabular-nums; }
.metric__sub { font-size: 13px; color: var(--muted); margin-top: 6px; min-height: 18px; }
.metric .ph-tag { margin-top: 10px; }

/* ---------- LEADERBOARD SKETCH ---------- */
.lb { padding: 24px; }
.lb__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.lb__head strong { font-size: 14px; font-weight: 700; }
.lb__rows { display: flex; flex-direction: column; gap: 10px; }
.lb__row { display: flex; align-items: center; gap: 14px; }
.lb__n { width: 22px; font-family: var(--serif); font-size: 17px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.lb__bar { height: 12px; border-radius: 6px; background: var(--lbBar); flex: 0 1 var(--w); }
.lb__t { font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.lb__note { margin: 16px 0 0; font-size: 12px; color: var(--faint); }

/* ---------- DEVICE FRAMES ---------- */
.devices { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.device { }
.device--mac { flex: 2; min-width: min(380px, 100%); }
.device--iphone { flex: 1; min-width: min(220px, 100%); }
.device--ipad { flex: 1; min-width: min(260px, 100%); }
.device p { margin: 10px 0 0; font-size: 12px; color: var(--faint); }

.frame-mac {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--border2);
  background: var(--bg2); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
/* The real capture carries its own window chrome, so the frame adds none. */

.frame-iphone {
  border-radius: 28px; overflow: hidden; border: 1px solid var(--border2);
  background: var(--bg2); padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.35); max-width: 240px;
}

.frame-ipad {
  border-radius: 22px; overflow: hidden; border: 1px solid var(--border2);
  background: var(--bg2); padding: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* Real 1.0.0 captures from the app repo's screenshots/1.0.0/, as WebP 1x/2x
   with a JPEG fallback. The frame takes the image's own aspect ratio. */
.shot { display: block; overflow: hidden; }
.shot img { display: block; width: 100%; height: auto; }
.frame-iphone .shot { border-radius: 20px; }
.frame-ipad .shot { border-radius: 14px; }