/* =============================================================
   TK-PERSONAS — the six situation cards (homepage redesign, Task 8,
   2026-09-09). The chip strip is gone; the cards are back, drawn in
   the warm flat style the owner picked, on the treatment from
   docs/superpowers/mockups/2026-09-09/situations-1.html.

   Every rule is scoped under .tk-personas (the class mount() puts on
   its host) so a card's own tint beats .surface-sticker's cream fill
   on specificity: the page loads this stylesheet in <head>, before
   its own <style> block, so equal-specificity rules there would win.

   The section head (eyebrow, H2, sub) is the page's, on the one head
   pattern. This file owns the grid and the card only.
   ============================================================= */
.tk-personas { max-width: none; margin: 0; padding: 0; }

/* Spec 1.1: 3 columns at 1024 and up, 2 at 641 to 1023, 1 at 640 and
   below; gaps 24 and 16. Spec 1.2: 48px under the head, 32px at 640. */
.tk-personas .tk-p-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 1023px) {
  .tk-personas .tk-p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tk-personas .tk-p-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
}

/* The card is one of the four objects allowed the sticker surface
   (spec 1.4): .surface-sticker carries the 2px ink border, the 18px
   radius and the 4px offset shadow, and the tint fills it. */
.tk-personas .tk-p-card {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; margin: 0; padding: 20px 20px 22px;
  text-align: left; font: inherit; color: var(--ink);
  background: var(--tint);
  cursor: pointer;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.tk-personas .tk-p-card:focus-visible { outline: 3px solid var(--pink-dark); outline-offset: 3px; }

/* The mockup's six tints, in page order: no two neighbours match at
   three, two or one columns. Each is a tint of a palette hue: 1 and 5
   of debit, 2 and 6 of blush, 3 of lemon, 4 of mint. */
.tk-personas .tk-p-tint-1 { --tint: #FCE8DE; }
.tk-personas .tk-p-tint-2 { --tint: #E3F1F7; }
.tk-personas .tk-p-tint-3 { --tint: #FFF0CF; }
.tk-personas .tk-p-tint-4 { --tint: #DDF2E7; }
.tk-personas .tk-p-tint-5 { --tint: #F9E2D6; }
.tk-personas .tk-p-tint-6 { --tint: #D9ECF4; }

.tk-personas .tk-p-scene { display: block; position: relative; aspect-ratio: 4 / 3; margin: 0 0 20px; }
.tk-personas .tk-p-scene svg { display: block; width: 100%; height: 100%; }

.tk-personas .tk-p-card h3 {
  font: 700 var(--h3) / 1.14 'Fraunces', Georgia, serif;
  letter-spacing: -.012em; margin: 0 0 9px; color: var(--ink);
}
.tk-personas .tk-p-mirror {
  display: block; margin: 0 0 16px; max-width: 31ch;
  font: 400 var(--small) / 1.5 'Inter', sans-serif; color: var(--mute);
}
.tk-personas .tk-p-cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font: 600 var(--small) / 1.2 'Inter', sans-serif; color: var(--pink-dark);
}
.tk-personas .tk-p-arw { flex: none; transition: transform .34s var(--ease); }

/* Spec 1.6: motion on hover only, one element per scene. */
.tk-personas .tk-p-mv { transition: transform .5s var(--ease), opacity .5s var(--ease); }
.tk-personas .tk-p-mv--swing { transform-origin: 152px 124px; }

@media (hover: hover) {
  .tk-personas .tk-p-card:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--ink); }
  .tk-personas .tk-p-card:hover .tk-p-arw { transform: translateX(4px); }
  .tk-personas .tk-p-card:hover .tk-p-mv--swing { transform: rotate(3.2deg); }
  .tk-personas .tk-p-card:hover .tk-p-mv--steam { transform: translateY(-9px); opacity: .55; }
  .tk-personas .tk-p-card:hover .tk-p-mv--push { transform: translate(5px, -5px); }
  .tk-personas .tk-p-card:hover .tk-p-mv--rise { transform: translateY(-8px); }
  .tk-personas .tk-p-card:hover .tk-p-mv--drift { transform: translate(-7px, -5px); }
  .tk-personas .tk-p-card:hover .tk-p-mv--bob { transform: translateY(-8px); }
}
.tk-personas .tk-p-card:focus-visible .tk-p-mv--swing { transform: rotate(3.2deg); }
.tk-personas .tk-p-card:focus-visible .tk-p-mv--steam { transform: translateY(-9px); opacity: .55; }
.tk-personas .tk-p-card:focus-visible .tk-p-mv--push { transform: translate(5px, -5px); }
.tk-personas .tk-p-card:focus-visible .tk-p-mv--rise { transform: translateY(-8px); }
.tk-personas .tk-p-card:focus-visible .tk-p-mv--drift { transform: translate(-7px, -5px); }
.tk-personas .tk-p-card:focus-visible .tk-p-mv--bob { transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  .tk-personas .tk-p-card,
  .tk-personas .tk-p-mv,
  .tk-personas .tk-p-arw { transition: none; }
  .tk-personas .tk-p-card:hover { transform: none; }
  .tk-personas .tk-p-card:hover .tk-p-mv,
  .tk-personas .tk-p-card:focus-visible .tk-p-mv { transform: none; }
  /* the steam is the one moving part that also fades: hold its rest value */
  .tk-personas .tk-p-card:hover .tk-p-mv--steam,
  .tk-personas .tk-p-card:focus-visible .tk-p-mv--steam { opacity: .24; }
  .tk-personas .tk-p-card:hover .tk-p-arw { transform: none; }
}

/* ── The compact row, 640 and below (owner decision, 2026-09-09) ──
   Six full 4-by-3 cards cost 2,788px of scroll at 375, which is more page
   than the six situations are worth. So at 640 and below the same card
   becomes a row: the scene as a 112px square on the left, the heading, the
   mirror line and the CTA stacked beside it. Nothing is dropped and nothing
   is truncated; all six stay on the page, on the same sticker surface, the
   same tints and the same one moving part.

   The scene is cropped, never squashed: the SVG carries
   preserveAspectRatio="xMidYMid slice" (tk-personas.js), so a square box
   shows the middle 300 of the 400-wide viewBox, which is where every scene's
   focal object sits. A plain 112 by 112 box without it would scale a 4-by-3
   scene into a square.

   Laid out on grid areas rather than a flex row so the button needs no extra
   wrapper element around its three text children. */
@media (max-width: 640px) {
  .tk-personas .tk-p-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: 'scene h3' 'scene mirror' 'scene cta';
    align-content: center;
    column-gap: 14px;
    padding: 13px;
  }
  .tk-personas .tk-p-scene {
    grid-area: scene; align-self: center;
    width: 112px; height: 112px; aspect-ratio: auto; margin: 0;
  }
  .tk-personas .tk-p-card h3 {
    grid-area: h3; font-size: 18px; line-height: 1.18; margin: 0 0 3px;
  }
  .tk-personas .tk-p-mirror {
    grid-area: mirror; max-width: none; margin: 0 0 7px;
    font-size: 13px; line-height: 1.4;
  }
  .tk-personas .tk-p-cta {
    grid-area: cta; margin-top: 0; font-size: 13px; gap: 5px;
  }
  .tk-personas .tk-p-arw { width: 15px; height: 15px; }
}
