/* ═══════════════════════════════════════════════════════════════════════
   mockups.css — hand-built HTML/CSS product renders ("living UI")
   Reminiscent Chronicles marketing site v2.

   Three families of components, all fictional data, all animations
   transform/opacity only, all gated behind `.play` (added by JS via
   IntersectionObserver) AND prefers-reduced-motion: no-preference:

     .mk-studio    — Studio pipeline board + invoice card
     .mk-callboard — CallBoard call sheet (blocks, crew chips, toast)
     .mk-review    — Post-Production review room (filmstrip, pins,
                     DRAGGABLE v3/v4 compare, approval checklist)

   The `.vg` wrapper scales any mockup down for journey-ribbon vignettes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Window chrome ── */
.mk {
  --mk-panel: #FFFFFE;
  --mk-line: rgba(26, 26, 46, 0.10);
  --mk-ink: #1A1A2E;
  --mk-muted: #6B6B7E;
  font-family: var(--font-ui);
  background: var(--mk-panel);
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(26, 26, 46, 0.16);
  overflow: hidden;
  width: 100%;
  text-align: left;
}
.mk * { box-sizing: border-box; }
.mk-bar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  background: var(--cream-raised);
  border-bottom: 1px solid var(--mk-line);
}
.mk-bar .dots { display: flex; gap: 5px; }
.mk-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sage-soft); display: block; }
.mk-bar .dots i:first-child { background: var(--sage); }
.mk-bar .mk-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); margin-left: 0.3rem; }
.mk-bar .mk-app { margin-left: auto; font-size: 0.64rem; font-weight: 600; color: var(--evergreen); border: 1px solid rgba(49,91,77,0.35); border-radius: 100px; padding: 0.14rem 0.55rem; }
.mk-body { padding: 0.9rem; }

/* generic chips */
.mk-chip {
  display: inline-block; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; border-radius: 100px; padding: 0.16rem 0.55rem;
  background: var(--cream-deep); color: var(--ink-soft);
  white-space: nowrap;
}
.mk-chip.green { background: rgba(49, 91, 77, 0.12); color: var(--evergreen-deep); }
.mk-chip.navy { background: var(--navy); color: var(--cream); }
.mk-chip.sage { background: var(--sage-soft); color: var(--evergreen-deep); }

/* ═══ STUDIO — pipeline board ═══ */
.mk-board { position: relative; }
.mk-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; }
.mk-col { background: var(--cream); border: 1px solid var(--mk-line); border-radius: 8px; padding: 8px; min-height: 148px; }
.mk-colhead {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mk-muted); display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px 6px;
}
.mk-colhead .cnt { font-family: var(--font-display); font-size: 0.8rem; color: var(--sage); }
.mk-card {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 6px;
  padding: 7px 8px; margin-bottom: 7px;
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.06);
}
.mk-card .nm { font-size: 0.68rem; font-weight: 600; color: var(--mk-ink); display: block; line-height: 1.3; }
.mk-card .tp { font-size: 0.58rem; color: var(--mk-muted); display: block; margin-top: 1px; }
.mk-card .mk-chip { margin-top: 5px; }
/* the moving card: absolutely positioned inside .mk-cols, hops across columns */
.mk-mover {
  position: absolute; top: 30px; left: 9px;
  width: calc(25% - 25px);
  z-index: 3; margin: 0;
  box-shadow: 0 10px 26px rgba(26, 26, 46, 0.22);
  border-color: rgba(49, 91, 77, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .play .mk-mover { animation: mk-hop 14s var(--ease-out) infinite; }
}
@keyframes mk-hop {
  0%, 16%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  20%       { transform: translate(calc(50% + 13px), -14px) rotate(2deg); }
  24%, 40%  { transform: translate(calc(100% + 27px), 40px) rotate(0deg); }
  44%       { transform: translate(calc(150% + 40px), 20px) rotate(-2deg); }
  48%, 64%  { transform: translate(calc(200% + 54px), 0) rotate(0deg); }
  68%       { transform: translate(calc(250% + 67px), -12px) rotate(2deg); }
  72%, 88%  { transform: translate(calc(300% + 81px), 62px) rotate(0deg); opacity: 1; }
  94%       { opacity: 0; transform: translate(calc(300% + 81px), 62px); }
  95%       { opacity: 0; transform: translate(0, 0); }
  100%      { opacity: 1; transform: translate(0, 0); }
}

/* ═══ STUDIO — invoice card ═══ */
.mk-invoice { max-width: 420px; }
.mk-invoice .mk-body { padding: 1rem 1.1rem; position: relative; }
.mk-inv-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--mk-line); padding-bottom: 0.55rem; margin-bottom: 0.55rem; }
.mk-inv-head .no { font-size: 0.64rem; color: var(--mk-muted); letter-spacing: 0.08em; }
.mk-inv-head .who { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--mk-ink); }
.mk-row { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.7rem; color: var(--ink-soft); padding: 0.28rem 0; }
.mk-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mk-ink); }
.mk-row.total { border-top: 1px solid var(--mk-line); margin-top: 0.3rem; padding-top: 0.5rem; font-weight: 700; color: var(--mk-ink); font-size: 0.76rem; }
.mk-row.paid-line .mk-chip { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .play .mk-pulse-in { animation: mk-pulse-in 5s var(--ease-out) infinite; }
}
@keyframes mk-pulse-in {
  0%, 8%   { opacity: 0; transform: scale(0.6); }
  14%      { opacity: 1; transform: scale(1.14); }
  18%, 96% { opacity: 1; transform: scale(1); }
  100%     { opacity: 1; transform: scale(1); }
}
.mk-stamp {
  position: absolute; right: 1rem; top: 42%;
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0.26em;
  color: var(--evergreen); border: 2.5px solid var(--evergreen);
  border-radius: 6px; padding: 0.25rem 0.7rem;
  transform: rotate(-9deg); opacity: 0.92;
}
@media (prefers-reduced-motion: no-preference) {
  .play .mk-stamp { animation: mk-stamp-in 5s var(--ease-out) infinite; }
}
@keyframes mk-stamp-in {
  0%, 22%   { opacity: 0; transform: rotate(-9deg) scale(2.1); }
  30%       { opacity: 0.95; transform: rotate(-9deg) scale(0.94); }
  34%, 100% { opacity: 0.92; transform: rotate(-9deg) scale(1); }
}

/* Studio combined scene (product page hero) */
.mk-scene-studio { position: relative; }
.mk-scene-studio .mk-invoice {
  position: absolute; right: -14px; bottom: -26px; width: 62%;
  z-index: 4;
}
@media (max-width: 859px) {
  .mk-scene-studio .mk-invoice { position: static; width: 100%; margin-top: 1rem; }
}

/* ═══ CALLBOARD — call sheet ═══ */
.mk-callboard { position: relative; }
.mk-cs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding-bottom: 0.6rem; }
.mk-cs-head .prod { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--mk-ink); }
.mk-cs-head .date { font-size: 0.62rem; color: var(--mk-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.mk-strip {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center;
  background: var(--cream); border: 1px solid var(--mk-line); border-radius: 8px;
  padding: 0.5rem 0.8rem; margin-bottom: 0.7rem;
  font-size: 0.64rem; color: var(--ink-soft);
}
.mk-strip strong { color: var(--mk-ink); font-weight: 700; }
.mk-strip .sun { color: var(--evergreen-deep); }
.mk-blocks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.8rem; }
.mk-block {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 0.7rem;
  border: 1px solid var(--mk-line); border-left: 3px solid var(--sage);
  border-radius: 6px; padding: 0.42rem 0.65rem; background: #fff;
}
.mk-block.now { border-left-color: var(--evergreen); background: rgba(49, 91, 77, 0.05); }
.mk-block .tm { font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--evergreen-deep); }
.mk-block .bl { font-size: 0.68rem; font-weight: 600; color: var(--mk-ink); }
.mk-block .bs { font-size: 0.58rem; color: var(--mk-muted); display: block; }
.mk-crew { border-top: 1px solid var(--mk-line); padding-top: 0.55rem; }
.mk-crew-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.mk-crew-row .av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--sage-soft); color: var(--evergreen-deep);
  font-size: 0.56rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.mk-crew-row .cn { font-size: 0.68rem; font-weight: 600; color: var(--mk-ink); flex: 1; }
.mk-crew-row .cr { font-size: 0.58rem; color: var(--mk-muted); }
/* flipping status chip: two stacked states */
.mk-status { position: relative; min-width: 74px; height: 1.2rem; }
.mk-status span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 700; border-radius: 100px;
}
.mk-status .s-a { background: rgba(49, 91, 77, 0.12); color: var(--evergreen-deep); }
.mk-status .s-b { background: var(--cream-deep); color: var(--ink-soft); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .play .mk-status.flips .s-a { animation: mk-flip-a 8s ease infinite; }
  .play .mk-status.flips .s-b { animation: mk-flip-b 8s ease infinite; }
}
@keyframes mk-flip-a { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mk-flip-b { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
/* release toast */
.mk-toast {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--navy); color: var(--cream);
  font-size: 0.66rem; font-weight: 600;
  border-radius: 8px; padding: 0.5rem 0.8rem;
  box-shadow: 0 12px 30px rgba(15, 18, 32, 0.35);
  opacity: 0; transform: translateY(14px);
}
.mk-toast .tick {
  width: 15px; height: 15px; border-radius: 50%; background: var(--evergreen);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.58rem; color: #fff; flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .play .mk-toast { animation: mk-toast 9s var(--ease-out) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-toast { opacity: 1; transform: none; }
}
@keyframes mk-toast {
  0%, 18%   { opacity: 0; transform: translateY(14px); }
  24%, 78%  { opacity: 1; transform: translateY(0); }
  86%, 100% { opacity: 0; transform: translateY(14px); }
}

/* ═══ POST-PRODUCTION — review room (dark) ═══ */
.mk-review {
  --mk-panel: #171A2B;
  --mk-line: rgba(245, 240, 232, 0.12);
  --mk-ink: #F5F0E8;
  --mk-muted: #B9B9C6;
  background: linear-gradient(180deg, #1A1A2E, #12152400 60%), #141728;
  border-color: rgba(245, 240, 232, 0.14);
}
.mk-review .mk-bar { background: #12152400; background-color: #131628; border-bottom-color: var(--mk-line); }
.mk-review .mk-bar .mk-title { color: var(--mk-muted); }
.mk-review .mk-bar .dots i { background: #2E3350; }
.mk-review .mk-bar .dots i:first-child { background: var(--sage); }
.mk-review .mk-bar .mk-app { color: var(--sage); border-color: rgba(154, 174, 163, 0.4); }

/* screen: v3/v4 compare (user-draggable) */
.mk-compare {
  --split: 55%;
  position: relative; border-radius: 8px; overflow: hidden;
  aspect-ratio: 16 / 8.2;
  border: 1px solid var(--mk-line);
  touch-action: pan-y;
}
.mk-frame-scene { position: absolute; inset: 0; }
/* "footage": layered gradients — v3 flat/cool, v4 graded/warm */
.scene-v3 {
  background:
    radial-gradient(120% 90% at 72% 30%, rgba(154, 174, 163, 0.35), transparent 55%),
    radial-gradient(60% 75% at 30% 78%, rgba(62, 62, 82, 0.8), transparent 60%),
    linear-gradient(200deg, #3E4460 0%, #262B44 52%, #171A2E 100%);
}
.scene-v3::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(65% 100% at 50% 115%, rgba(15, 18, 32, 0.7), transparent 60%);
}
.scene-v4 {
  background:
    radial-gradient(120% 90% at 72% 30%, rgba(216, 225, 220, 0.5), transparent 55%),
    radial-gradient(60% 75% at 30% 78%, rgba(49, 91, 77, 0.55), transparent 62%),
    linear-gradient(200deg, #46536B 0%, #2A3A4C 50%, #14202A 100%);
}
.scene-v4::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(65% 100% at 50% 115%, rgba(10, 22, 20, 0.75), transparent 60%);
}
/* the overlay layer is clipped at --split */
.mk-compare .layer-b { clip-path: inset(0 0 0 var(--split)); }
.mk-compare .v-tag {
  position: absolute; top: 8px; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; padding: 0.18rem 0.5rem; border-radius: 4px; z-index: 3;
}
.mk-compare .v-tag.v3 { left: 8px; background: rgba(15, 18, 32, 0.65); color: var(--muted-on-navy); }
.mk-compare .v-tag.v4 { right: 8px; background: var(--evergreen); color: #fff; }
.mk-compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px;
  background: var(--cream); z-index: 4; pointer-events: none;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
.mk-compare-handle::after {
  content: "⇄"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream); color: var(--navy);
  font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.mk-compare input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize; z-index: 5;
  -webkit-appearance: none; appearance: none;
}
.mk-compare-hint {
  font-size: 0.62rem; color: var(--mk-muted); text-align: center; margin: 0.45rem 0 0;
}

/* comment pins on the screen */
.mk-pin {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(15, 18, 32, 0.86); color: var(--cream);
  border: 1px solid rgba(154, 174, 163, 0.4);
  font-size: 0.6rem; font-weight: 600;
  border-radius: 100px; padding: 0.24rem 0.6rem 0.24rem 0.28rem;
  transform: scale(0); transform-origin: 0 50%;
  white-space: nowrap; pointer-events: none;
}
.mk-pin .tc {
  background: var(--evergreen); color: #fff; border-radius: 100px;
  font-size: 0.56rem; font-weight: 700; padding: 0.1rem 0.42rem;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .play .mk-pin { animation: mk-pin-pop 11s var(--ease-out) infinite; animation-delay: var(--pd, 0s); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-pin { transform: scale(1); }
}
@keyframes mk-pin-pop {
  0%, 6%    { transform: scale(0); }
  10%       { transform: scale(1.08); }
  13%, 88%  { transform: scale(1); }
  94%, 100% { transform: scale(0); }
}

/* filmstrip + playhead */
.mk-filmstrip { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 0.7rem; }
.mk-filmstrip .fr {
  aspect-ratio: 16/9; border-radius: 3px;
  background: linear-gradient(160deg, #2A2F4A, #1B1F36);
  border: 1px solid rgba(245, 240, 232, 0.08);
}
.mk-filmstrip .fr:nth-child(2n) { background: linear-gradient(160deg, #232842, #171B30); }
.mk-filmstrip .fr:nth-child(3n) { background: linear-gradient(200deg, #2E3350, #1B1F36); }
/* full-width invisible overlay whose LEFT-EDGE line travels 0 → 100% of its
   own width — pure transform, lands exactly on the strip's right edge */
.mk-playhead {
  position: absolute; top: -5px; bottom: -5px; left: 0; width: calc(100% - 2px);
  pointer-events: none; z-index: 2;
}
.mk-playhead::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sage);
  box-shadow: 0 0 8px rgba(154, 174, 163, 0.8);
}
.mk-playhead::before {
  content: ""; position: absolute; top: -4px; left: 1px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--sage);
}
@media (prefers-reduced-motion: no-preference) {
  .play .mk-playhead { animation: mk-scrub 11s linear infinite; }
}
@keyframes mk-scrub {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
/* timecode readout */
.mk-tc-row { display: flex; justify-content: space-between; align-items: center; margin-top: 0.55rem; font-size: 0.6rem; color: var(--mk-muted); font-variant-numeric: tabular-nums; }
.mk-tc-row .cut { color: var(--cream); font-weight: 700; }

/* approval checklist */
.mk-checklist { list-style: none; margin: 0.8rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--mk-line); }
.mk-checklist li {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; color: var(--mk-muted); padding: 0.26rem 0;
}
.mk-checklist .box {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(154, 174, 163, 0.5); position: relative;
}
.mk-checklist .box::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background: var(--evergreen); transform: scale(0);
}
.mk-checklist .box::before {
  content: ""; position: absolute; left: 3.5px; top: 4px;
  width: 6px; height: 3px; z-index: 1;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg) scale(0);
}
.mk-checklist li.done { color: var(--cream); }
.mk-checklist li.done .box { border-color: var(--evergreen); }
.mk-checklist li.done .box::after { transform: scale(1); }
.mk-checklist li.done .box::before { transform: rotate(-45deg) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .play .mk-checklist li.done .box::after { animation: mk-tick 0.4s var(--ease-out) both; animation-delay: var(--td, 0s); }
  .play .mk-checklist li.done .box::before { animation: mk-tick-mark 0.3s var(--ease-out) both; animation-delay: calc(var(--td, 0s) + 0.15s); }
}
@keyframes mk-tick { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes mk-tick-mark { from { transform: rotate(-45deg) scale(0); } to { transform: rotate(-45deg) scale(1); } }
.mk-checklist li .who { margin-left: auto; font-size: 0.56rem; color: var(--mk-muted); }

/* ═══ Vignette scaling (journey ribbon) ═══ */
.vg { width: min(460px, 100%); }
.vg .mk { box-shadow: 0 30px 70px rgba(10, 12, 24, 0.45); }
.vg .mk-cols { grid-template-columns: repeat(2, 1fr); }
.vg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vg-gallery .ph {
  aspect-ratio: 4/3; border-radius: 4px;
  background: linear-gradient(150deg, var(--sage-soft), var(--cream-deep));
  border: 1px solid var(--mk-line);
}
.vg-gallery .ph:nth-child(2) { background: linear-gradient(150deg, #C9D6CE, #E8E1D2); }
.vg-gallery .ph:nth-child(3) { background: linear-gradient(200deg, var(--sage-soft), #E3DccD); }
.vg-gallery .ph:nth-child(4) { background: linear-gradient(170deg, #D2DCD5, var(--cream-deep)); }
.vg-gallery .ph:nth-child(5) { background: linear-gradient(120deg, var(--cream-deep), var(--sage-soft)); }
.vg-gallery .ph:nth-child(6) { background: linear-gradient(220deg, #CBD8D0, var(--cream-deep)); }
/* lead form mini (inquiry vignette) */
.vg-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.7rem; }
.vg-form .f { height: 22px; border-radius: 5px; background: var(--cream); border: 1px solid var(--mk-line); position: relative; overflow: hidden; }
.vg-form .f::after {
  content: attr(data-v); position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 0.6rem; color: var(--ink-soft); font-weight: 500;
}
.vg-form .f-btn {
  height: 24px; border-radius: 5px; background: var(--evergreen); color: #fff;
  font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* signature squiggle (booking vignette) */
.vg-sig { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px dashed var(--mk-line); margin-top: 0.5rem; padding-top: 0.5rem; }
.vg-sig svg { width: 110px; height: 30px; overflow: visible; }
.vg-sig path { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (prefers-reduced-motion: no-preference) {
  .play .vg-sig path { animation: vg-sign 6s var(--ease-out) infinite; }
}
@media (prefers-reduced-motion: reduce) { .vg-sig path { stroke-dashoffset: 0; } }
@keyframes vg-sign {
  0%, 10% { stroke-dashoffset: 1; }
  45%, 100% { stroke-dashoffset: 0; }
}
.vg-sig .sig-label { font-size: 0.56rem; color: var(--mk-muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* ═══ Peek strips (home trio cards) ═══ */
.peek-strip { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.peek-strip .pk-row {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(26, 26, 46, 0.08); border-radius: 6px;
  padding: 5px 8px; background: #fff; font-size: 0.6rem; color: var(--ink-soft);
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.05);
}
.peek-strip .pk-row .nm { font-weight: 600; color: var(--ink); }
.peek-strip .pk-row .mk-chip { margin-left: auto; }
.peek-strip.dark { background: #141728; }
.peek-strip.dark .pk-row { background: #1D2138; border-color: rgba(245, 240, 232, 0.1); color: var(--muted-on-navy); }
.peek-strip.dark .pk-row .nm { color: var(--cream); }