/* © 2026 LFM Labs. All rights reserved. */
/* site-makeover.css: "From this, to this", the redesign case files (site-makeover.js).
   Tabs, the label and brief, the laptop slider and the phone slider beside it, pins on
   the after, the paired numbered lists and the strip of generated imagery. Tokens only. */

.mk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.mk { max-width: 1120px; }

/* ------------------------------------------------------------ Head */
.mk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: end; margin: 0 0 18px; }
.mk-label { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.mk-label strong { font: 500 24px/1.2 var(--type); letter-spacing: -0.01em; }
.mk-place { color: var(--ink-2); }
.mk-brief { margin: 0; max-width: 62ch; color: var(--ink-2); }
.mk-brief-k { display: block; margin-bottom: 2px; color: var(--ink); font: 600 11px/1.4 var(--brand-type); letter-spacing: 0.18em; text-transform: uppercase; }
.mk-brief q { color: var(--ink); font-size: 18px; }
.mk-toggle { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.mk-toggle-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ----------------------------------------------------------- Stage */
.mk-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.mk-stage[data-phone="true"] { grid-template-columns: minmax(0, 1fr) 248px; }

.mk-frame { --bezel: 12px; --chin: 40px; position: relative; padding: var(--bezel) var(--bezel) var(--chin); border-radius: 16px 16px 10px 10px;
  background: var(--device); box-shadow: var(--shadow-card); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.mk-frame[hidden] { display: none; }
/* Each side is a scrolling view of the whole page; its first screen paints underneath
   until the full-page shot arrives. No scrollbar: the clock or the visitor's hand moves it. */
.mk-view { aspect-ratio: 1280 / 800; overflow: hidden auto; scrollbar-width: none; border-radius: 6px 6px 0 0;
  background-color: var(--paper-edge); background-repeat: no-repeat; background-position: top; background-size: 100% auto; }
.mk-view::-webkit-scrollbar { display: none; }
.mk-view:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mk-layer { position: relative; container-type: inline-size; }
.mk-full { display: block; width: 100%; height: auto; }
.mk-after { position: absolute; inset: var(--bezel) var(--bezel) var(--chin); clip-path: inset(0 0 0 var(--split, 50%)); }
.mk-after .mk-view { height: 100%; aspect-ratio: auto; }
.mk-track { position: absolute; inset: var(--bezel) var(--bezel) var(--chin); pointer-events: none; }
.mk-frame.is-phone { --bezel: 8px; --chin: 40px; border-radius: 32px; }
.mk-frame.is-phone .mk-view { aspect-ratio: 375 / 812; border-radius: 24px 24px 8px 8px; }

/* Pins ride the after's page: --y is % of its first screen, which is --fold page-widths tall. */
.mk-pin { position: absolute; left: var(--x); top: calc(var(--y) * var(--fold) * 1cqw); translate: -50% -50%; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font: 700 13px/1 var(--brand-type); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-card); }
.mk-pin.is-hot { scale: 1.25; box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-card); }
.is-phone .mk-pin { width: 22px; height: 22px; font-size: 11px; }

.mk-handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; pointer-events: auto; translate: -1px 0; background: var(--paper-lift); outline: none; }
.mk-grip { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-lift); box-shadow: var(--shadow-card); }
.mk-grip::before, .mk-grip::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; translate: 0 -50%; }
.mk-grip::before { left: 8px; border-right-color: var(--ink); }
.mk-grip::after { right: 8px; border-left-color: var(--ink); }
.mk-handle:focus-visible .mk-grip { outline: 2px solid var(--ink); outline-offset: 3px; }
.mk-tag { position: absolute; top: 4%; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--sheet-bg); color: var(--ink); font: 600 10px/1 var(--brand-type);
  letter-spacing: 0.2em; text-transform: uppercase; pointer-events: none; }
.mk-tag.left { left: 3.5%; }
.mk-tag.right { right: 3.5%; }
.is-phone .mk-tag { top: 2.5%; padding: 4px 7px; font-size: 9px; letter-spacing: 0.14em; }
.is-phone .mk-tag.left { left: 6%; }

/* The Pause button sits in the device's chin, under the pages (WCAG 2.2.2). */
.mk-play { position: absolute; right: var(--bezel); bottom: 6px; height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0;
  border-radius: var(--radius-pill); background: var(--paper-lift); color: var(--ink); font: 600 11px/1 var(--brand-type); letter-spacing: 0.08em; cursor: pointer; }
.mk-play:focus-visible { outline: 2px solid var(--paper-lift); outline-offset: 2px; }
.mk-play-icon { width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.mk-play[data-state="paused"] .mk-play-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.is-phone .mk-play { right: 50%; translate: 50% 0; }
.is-phone .mk-tag.right { right: 6%; }

/* ----------------------------------------------------------- Notes */
.mk-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 30px 0 0; }
.mk-sub { margin: 0 0 12px; font: 600 15px/1.3 var(--type); }
.mk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--ink-2); }
.mk-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.mk-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--brand-type); }
.mk-issues .mk-n { border: 1.5px solid var(--danger); color: var(--ink); }
.mk-callouts .mk-n { background: var(--accent); color: var(--on-accent); }

/* ----------------------------------------------------------- Strip */
.mk-strip { margin: 30px 0 0; }
.mk-pics { margin: 0 0 10px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
.mk-pics img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--paper-edge); }
.mk-strip figcaption { color: var(--ink-2); font-size: 14px; }
.mk-strip figcaption strong { color: var(--ink); font-weight: 600; }

.mk-once { margin-top: clamp(48px, 8vh, 80px); }

@media (max-width: 699px) {
  .mk-head { grid-template-columns: minmax(0, 1fr); }
  .mk-label strong { font-size: 21px; }
  .mk-toggle { justify-self: start; }
  .mk-stage[data-phone="true"] { grid-template-columns: minmax(0, 1fr); }
  .mk-frame.is-laptop { --bezel: 7px; --chin: 38px; border-radius: 12px 12px 8px 8px; }
  .mk-frame.is-phone { width: min(248px, 72vw); justify-self: center; }
  .is-laptop .mk-pin { width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 3px var(--accent-soft); }
  .is-laptop .mk-tag { padding: 3px 6px; font-size: 8px; letter-spacing: 0.12em; }
  .mk-notes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mk-pics { gap: 6px; }
  .mk-pics img { border-radius: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mk-pin { transition: scale 160ms ease, box-shadow 160ms ease; }
}