/* ============================================================
   Wavetype's scene (2026-10-02): an email draft, the card next to the cursor, the clean text pasted where the cursor was,
   then Edit Mode: the paragraph selected, the Edit card, the shorter text in its place.
   Markup: products/scenes/wavetype.html; motion: assets/js/scene-wavetype.js; the shared scene frame: scene.css.
   Everything inside the window is measured in --k, one pixel of Wavetype's card at 100% scale, so the card keeps
   its real proportions at every width.
   The window is the demo's (wavetype/docs/img/demo.gif, drawn there at 1.5x): 653 wide, field inset 38, To at 71,
   Subject at 106, the field's first line at 177 (centres), 35 between lines, Segoe UI 17.5, #15181D.
   The card is Stamp, as card_styles.py:585-1130 draws it and as the real LivePanel renders it at scale 1 (measured
   2026-10-02 with PIL on those renders: 480 wide, 2 px ink border, white ring, 5 px hard shadow, 38 px band, 25 px
   lines, dot 11 px at 16 from the edge, timer 46 x 22 at 10 from the right).
   Without .is-live (no JS, no GSAP, reduced motion) the scene is one still frame: the card formatting above the
   clean text, the moment both are on screen in the demo (frame 338).
   ============================================================ */

.sc[data-scene="wavetype"] {
  --hw: clamp(360px, 33vw, 540px);
  --gap: clamp(40px, 4vw, 72px);
  --ww: min(780px, 100vw - 2 * var(--pad) - var(--hw) - var(--gap));
  --k: calc(var(--ww) / 653);
  --fi: calc(38 * var(--k));                         /* the field's inset: where the caret starts */
  --cw: calc(480 * var(--k));                        /* the card's width */
  --wt-ink: #0B0B0B;
  --wt-paper: #FFFDF6;
  --wt-rec: #FFD83D;
  --wt-fmt: #C9B6FF;
  --wt-ghost: #8C887B;
  --wt-gone: #9A968A;
  --wt-cut: #FF4F2B;
  --wt-lime: #B6F36A;
  --wt-ring: rgba(255, 255, 255, 0.85);
  --wt-edit: #7FDBFF;                                /* Edit Mode's band (card_styles.py:928) */
  --wt-said: #3A372F;
  --wt-sel: #0078D7;                                 /* Windows' selection colour */
}

/* ---------- the window ---------- */

.wt-win {
  position: relative;
  width: var(--ww);
  height: calc(301 * var(--k));
  box-sizing: border-box;
  border-radius: calc(8 * var(--k));
  background: #15181D;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Windows 11 draws its windows with a soft shadow: the frame is part of what is shown */
  box-shadow: 0 2px 4px rgba(13, 13, 15, 0.1), 0 28px 60px -22px rgba(13, 13, 15, 0.5);
  color: #E9EAEC;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Open Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wt-bar { position: absolute; left: 0; right: 0; top: 0; height: calc(30 * var(--k)); display: flex; align-items: center; justify-content: space-between; }
.wt-bar__t { padding-left: calc(12 * var(--k)); font-size: calc(12 * var(--k)); color: #E9EAEC; }
.wt-bar__c { display: flex; height: 100%; }
.wt-bar__c svg { height: 100%; width: auto; fill: none; stroke: #C9CCD2; stroke-width: 1; }
.wt-bar__c svg:first-child path { stroke-width: 1; }

.wt-doc { position: absolute; left: var(--fi); right: var(--fi); top: calc(53.5 * var(--k) + var(--rdy, 0px)); } /* --rdy: the maximized window's extra head room (the scene) */
.wt-meta { margin: 0; font-size: calc(20 * var(--k)); line-height: calc(35 * var(--k)); color: #8B919C; white-space: nowrap; }
.wt-field { position: relative; margin: calc(36 * var(--k)) 0 0; font-size: calc(20 * var(--k)); line-height: calc(35 * var(--k)); }

/* a word of the pasted text (the paste is one frame, as Ctrl+V is: wavetype.py:1381) */
.wf { display: inline-block; vertical-align: top; }
.wf i { font-style: normal; }
.wt-caret {
  position: absolute; left: 0; top: calc(4 * var(--k));
  width: max(1px, calc(1.3 * var(--k))); height: calc(27 * var(--k));
  background: #E9EAEC;
}

/* ---------- the card (Stamp) ---------- */

.wt-card {
  position: absolute;
  z-index: 3;
  left: calc(var(--fi) - 20.5 * var(--k));
  bottom: calc(100% - 153.5 * var(--k) - var(--rdy, 0px));              /* 10 above the caret (live_panel.py:116) */
  width: var(--cw);
  box-sizing: border-box;
  border: calc(2 * var(--k)) solid var(--wt-ink);
  border-radius: calc(10 * var(--k));
  background: var(--wt-paper);
  color: var(--wt-ink);
  box-shadow: calc(5 * var(--k)) calc(5 * var(--k)) 0 var(--wt-ink), 0 0 0 calc(1.5 * var(--k)) var(--wt-ring),
    calc(5 * var(--k)) calc(5 * var(--k)) 0 calc(1.5 * var(--k)) var(--wt-ring);
  font-family: "Bricolage Grotesque", var(--display);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.wt-card__band {
  position: relative;
  display: flex; align-items: center;
  height: calc(38 * var(--k));
  padding: 0 calc(10 * var(--k)) 0 calc(14 * var(--k));
  background: var(--wt-rec);
  border-bottom: calc(2 * var(--k)) solid var(--wt-ink);
}
.wt-card__band > * { position: relative; }
/* FORMATTING: the band's lilac, laid over the yellow (the scene wipes it in) */
.wt-card__fmt { position: absolute; inset: 0; background: var(--wt-fmt); }
.wt-dot {
  flex: none; width: calc(11 * var(--k)); height: calc(11 * var(--k)); margin-right: calc(8 * var(--k));
  box-sizing: border-box; border-radius: 50%; border: calc(2 * var(--k)) solid var(--wt-ink); background: var(--wt-cut);
}
.wt-lab, .wt-lab__n {
  font-size: calc(13 * var(--k)); font-weight: 800; letter-spacing: 0.02em; line-height: 1; white-space: pre;
  font-variation-settings: "opsz" 13;
}
.wt-lab__n { opacity: 0.55; }
.wt-lvl { display: flex; align-items: center; gap: calc(3 * var(--k)); height: calc(22 * var(--k)); margin-left: calc(20 * var(--k)); }
.wt-lvl i { display: block; width: calc(4 * var(--k)); height: calc(4 * var(--k)); border-radius: calc(1 * var(--k)); background: var(--wt-ink); }
.wt-time {
  margin-left: auto;
  padding: 0 calc(7 * var(--k)); height: calc(22 * var(--k)); display: flex; align-items: center;
  border-radius: calc(4 * var(--k)); background: var(--wt-ink); color: var(--wt-rec);
  font: 700 calc(12.5 * var(--k)) / 1 "JetBrains Mono", ui-monospace, monospace;
}
.wt-card__body { position: relative; overflow: hidden; box-sizing: border-box; padding: calc(12 * var(--k)) calc(18.5 * var(--k)) calc(15 * var(--k)); }
.wt-card__text {
  margin: 0;
  font-size: calc(17 * var(--k)); font-weight: 500; line-height: calc(25 * var(--k)); letter-spacing: -0.005em;
  font-variation-settings: "opsz" 17;
}
/* a word of the live text: grey while the engine may still change it, ink once it is fixed (live_panel.py:43-48) */
.wc { display: inline-block; vertical-align: top; position: relative; white-space: pre; }
.wc > b { font-weight: inherit; display: inline-block; }
/* the lime mark on the word just fixed: a 2 px spread box, radius 2, 1.21 em tall (live_panel.py:982-985) */
.wc::before {
  content: ""; position: absolute; left: calc(-2 * var(--k)); right: calc(-2 * var(--k)); top: 50%;
  height: 1.21em; transform: translateY(-50%); border-radius: calc(2 * var(--k)); background: var(--wt-lime);
  z-index: -1; visibility: hidden;
}
.wc.is-mark::before { visibility: visible; }
.wt-card__text { position: relative; z-index: 0; }
/* the strike: a 3 px bar at -4 degrees, 3 px past each side (card_styles.py:877-907) */
.wc--x::after {
  content: ""; position: absolute; left: calc(-3 * var(--k)); width: calc(100% - 0.27em + 6 * var(--k)); top: 50%;
  height: calc(3 * var(--k)); margin-top: calc(-1.5 * var(--k)); background: var(--wt-cut);
  transform: rotate(-4deg) scaleX(var(--cut, 1)); transform-origin: 0 50%;
}
/* the progress bar of FORMATTING: 12 tall, 2 px ink border, radius 3, ink and lilac stripes, 18 in, 16 above the edge */
.wt-prog { overflow: hidden; height: calc(28 * var(--k)); padding: 0 calc(18 * var(--k)); }
.wt-prog i {
  display: block; height: calc(12 * var(--k)); box-sizing: border-box; margin-bottom: calc(16 * var(--k));
  border: calc(2 * var(--k)) solid var(--wt-ink); border-radius: calc(3 * var(--k)); background: #fff;
  --p: 0.9;
  background-image: repeating-linear-gradient(-45deg, var(--wt-ink) 0 calc(2.2 * var(--k)), var(--wt-fmt) calc(2.2 * var(--k)) calc(5 * var(--k)));
  background-size: calc(var(--p) * 100%) 100%;
  background-repeat: no-repeat;
}

/* the pill after the paste: lime, 38 tall, radius 10, 4 px shadow and the white ring (card_styles.py:1092-1119) */
.wt-pill {
  position: absolute; z-index: 4; left: 0; top: 0;
  display: flex; align-items: center; gap: calc(9 * var(--k));
  height: calc(38 * var(--k)); padding: 0 calc(14 * var(--k)) 0 calc(12 * var(--k)); box-sizing: border-box;
  border: calc(2 * var(--k)) solid var(--wt-ink); border-radius: calc(10 * var(--k)); background: var(--wt-lime); color: var(--wt-ink);
  box-shadow: calc(4 * var(--k)) calc(4 * var(--k)) 0 var(--wt-ink), 0 0 0 calc(1.5 * var(--k)) var(--wt-ring),
    calc(4 * var(--k)) calc(4 * var(--k)) 0 calc(1.5 * var(--k)) var(--wt-ring);
  white-space: nowrap; visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.wt-pill svg { width: calc(10 * var(--k)); height: calc(10 * var(--k)); margin-right: calc(-2 * var(--k)); fill: none; stroke: var(--wt-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wt-pill b { font: 800 calc(13 * var(--k)) / 1 "Bricolage Grotesque", var(--display); letter-spacing: 0.02em; font-variation-settings: "opsz" 13; }
.wt-pill span { font: 600 calc(12 * var(--k)) / 1 "JetBrains Mono", ui-monospace, monospace; opacity: 0.7; }

/* ---------- Edit Mode: the selection, the card, the pill (card_styles.py:926-1090, 515-600) ---------- */

/* the selected words: Windows' highlight, the whole line high, the space after each word with it */
.wt-short { display: none; }
.ws { display: inline-block; vertical-align: top; }
.ws i { font-style: normal; }
.wf.is-sel { background: var(--wt-sel); color: #fff; box-shadow: 0.3em 0 0 var(--wt-sel), 0 1px 0 var(--wt-sel), 0.3em 1px 0 var(--wt-sel); }
.wf.is-sel:last-child { box-shadow: 0 1px 0 var(--wt-sel); }

/* the card: the same slab as the dictation's, 480 wide; band 38, then the three commands (12 above, 32 high, 14
   under), the YOU line (22) and 12 under it: 136 tall with its borders */
.wt-ecard {
  position: absolute; z-index: 3; visibility: hidden;
  left: calc(var(--fi) - 20.5 * var(--k));
  bottom: calc(100% - 153.5 * var(--k) - var(--rdy, 0px));
  width: var(--cw);
  box-sizing: border-box;
  border: calc(2 * var(--k)) solid var(--wt-ink);
  border-radius: calc(10 * var(--k));
  background: var(--wt-paper);
  color: var(--wt-ink);
  box-shadow: calc(5 * var(--k)) calc(5 * var(--k)) 0 var(--wt-ink), 0 0 0 calc(1.5 * var(--k)) var(--wt-ring),
    calc(5 * var(--k)) calc(5 * var(--k)) 0 calc(1.5 * var(--k)) var(--wt-ring);
  font-family: "Bricolage Grotesque", var(--display);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.wt-eband { background: var(--wt-edit); }
/* the "selected text" icon: an ink tile 15 x 13, two lines in it, the second shorter (sel_mark, card_styles.py:433) */
.wt-selmk {
  flex: none; width: calc(15 * var(--k)); height: calc(13 * var(--k)); margin-right: calc(10 * var(--k));
  border-radius: calc(2 * var(--k)); background-color: var(--wt-ink);
  background-image: linear-gradient(var(--wt-edit), var(--wt-edit)), linear-gradient(var(--wt-edit), var(--wt-edit));
  background-repeat: no-repeat;
  background-size: calc(9 * var(--k)) calc(2 * var(--k)), calc(6 * var(--k)) calc(2 * var(--k));
  background-position: calc(3 * var(--k)) calc(3.5 * var(--k)), calc(3 * var(--k)) calc(7.5 * var(--k));
}
.wt-esub {
  margin-left: calc(7 * var(--k)); opacity: 0.75; white-space: nowrap;
  font-size: calc(13 * var(--k)); font-weight: 600; line-height: 1; font-variation-settings: "opsz" 13;
}
.wt-elvl { margin-left: calc(14 * var(--k)); }
.wt-chips { display: flex; gap: calc(8 * var(--k)); padding: calc(12 * var(--k)) calc(16.5 * var(--k)) calc(14 * var(--k)); }
.wt-chip {
  flex: 1 1 0; height: calc(32 * var(--k)); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--k));
  border: calc(2 * var(--k)) solid var(--wt-ink); border-radius: calc(7 * var(--k)); background: #fff;
  font-size: calc(13.5 * var(--k)); font-weight: 700; line-height: 1; font-variation-settings: "opsz" 13.5;
}
.wt-chip b {
  flex: none; width: calc(18 * var(--k)); height: calc(18 * var(--k)); border-radius: calc(4 * var(--k));
  display: flex; align-items: center; justify-content: center;
  background: var(--wt-ink); color: #fff; font: 700 calc(11 * var(--k)) / 1 "JetBrains Mono", ui-monospace, monospace;
}
/* an instruction of your own, not one of the three: all three step back to 35% (card_styles.py:1014) */
.wt-ecard.is-free .wt-chip { opacity: 0.35; }
.wt-you {
  display: flex; gap: calc(8 * var(--k)); margin: 0; padding: 0 calc(16.5 * var(--k)) calc(12 * var(--k));
  line-height: calc(22 * var(--k)); white-space: nowrap;
}
.wt-you__l { color: var(--wt-ghost); font: 700 calc(11 * var(--k)) / calc(22 * var(--k)) "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.06em; }
.wt-you__t { color: var(--wt-said); font-size: calc(15 * var(--k)); font-weight: 600; font-variation-settings: "opsz" 15; }
.wt-you__ph { color: var(--wt-ghost); }
.we { display: inline-block; vertical-align: top; }
/* REWRITING, a free instruction: the band and the striped bar alone, 14 above it and 16 under (edit_zones) */
.wt-eprog { height: calc(42 * var(--k)); padding-top: calc(14 * var(--k)); box-sizing: border-box; display: none; }
.wt-eprog i { --p: 0; }
.wt-ecard.is-rew .wt-eprog { display: block; }
.wt-ecard.is-rew .wt-ebody, .wt-ecard.is-rew .wt-elvl { display: none; }
/* the pill when it is done: the band's blue, the new word count, Ctrl+Z as a key, "undo" (edit_pill) */
.wt-epill { background: var(--wt-edit); padding: 0 calc(8 * var(--k)) 0 calc(14 * var(--k)); gap: 0; }
.wt-epill svg { margin-right: calc(7 * var(--k)); }
.wt-epill span { margin-left: calc(9 * var(--k)); opacity: 0.75; }
.wt-epill kbd {
  margin-left: calc(9 * var(--k)); height: calc(24 * var(--k)); padding: 0 calc(8 * var(--k)); box-sizing: border-box;
  display: flex; align-items: center;
  border: calc(2 * var(--k)) solid var(--wt-ink); border-radius: calc(5 * var(--k)); background: #fff;
  box-shadow: calc(2 * var(--k)) calc(2 * var(--k)) 0 var(--wt-ink);
  font: 700 calc(11.5 * var(--k)) / 1 "JetBrains Mono", ui-monospace, monospace;
}
.wt-epill em { margin-left: calc(4 * var(--k)); font: 600 calc(12.5 * var(--k)) / 1 "Bricolage Grotesque", var(--display); font-variation-settings: "opsz" 12.5; }

/* ---------- still: the head, then the window with the card formatting over the pasted text ---------- */

.sc[data-scene="wavetype"]:not(.is-live) .wt-dot,
.sc[data-scene="wavetype"]:not(.is-live) .wt-lvl,
.sc[data-scene="wavetype"]:not(.is-live) .wt-lab__n,
.sc[data-scene="wavetype"]:not(.is-live) .wc--x,
.sc[data-scene="wavetype"]:not(.is-live) .wt-ecard,
.sc[data-scene="wavetype"]:not(.is-live) .wt-epill { display: none; }
.sc[data-scene="wavetype"]:not(.is-live) .wt-caret { left: auto; right: 0; display: none; }
.sc[data-scene="wavetype"]:not(.is-live) .sc-device { align-self: center; margin-top: calc(40 * var(--k)); }
.sc[data-scene="wavetype"]:not(.is-live) .wt-time { color: var(--wt-fmt); }

/* ---------- live: pinned stage, desk composition (from 1100px) ---------- */

.sc[data-scene="wavetype"].is-live .wt-win { overflow: visible; }
/* the step words are laid over the head while they wait under their masks: they must not take its clicks */
.sc[data-scene="wavetype"].is-live .sc-beats, .sc[data-scene="wavetype"].is-live .sc-steps { pointer-events: none; }
.sc[data-scene="wavetype"] .sc-beat__s > span { text-wrap: balance; }
/* each heading is two lines, never three: the size is set by the longest line, "The text is clean." (7.54 em wide) */
.sc[data-scene="wavetype"].is-live .sc-ln { white-space: nowrap; }
/* the step row leaves and arrives through its own mask, with the heading (critic r1, N8) */
.sc[data-scene="wavetype"].is-live .sc-steps { overflow: hidden; padding: 3px 0; }
.sc[data-scene="wavetype"].is-live .sc-steps span { display: inline-block; }
/* the head leaves through masks too, never as a fade (critic r1, N7): each block sits in its own (set by the scene) */
.wt-hm { overflow: hidden; padding: 6px 0 0.16em; margin: -6px 0 -0.16em; }
/* the maximized window (the room, set by the scene): Windows' restore glyph, the step words light on its field */
.wt-rest, .wt-win.is-max .wt-max { display: none; }
.wt-win.is-max .wt-rest { display: inline; }
.sc[data-scene="wavetype"].is-dark .sc-beat__t, .sc[data-scene="wavetype"].is-dark .sc-steps { color: var(--bone); }
.sc[data-scene="wavetype"].is-dark .sc-beat__s { color: color-mix(in srgb, var(--bone) 70%, transparent); }
/* the still stacks the three steps under their headlines: the step word above each would say it twice (critic r2, N11) */
.sc[data-scene="wavetype"]:not(.is-live) .sc-beat__n { display: none; }
@media (min-width: 1100px) {
  .sc[data-scene="wavetype"].is-live .sc-hero .pp-name { font-size: clamp(3.8rem, 5.6vw, 5.9rem); }
  .sc[data-scene="wavetype"].is-live .sc-hero .pp-icon { width: clamp(56px, 5vw, 84px); }
  .sc[data-scene="wavetype"].is-live .sc-hero .pp-pitch { font-size: clamp(1.4rem, 2vw, 2.1rem); max-width: 18ch; }
  .sc[data-scene="wavetype"].is-live .sc-beat__t { font-size: min(calc(var(--hw) / 7.7), 6rem); line-height: 0.92; }
  .sc[data-scene="wavetype"].is-live .sc-device { top: 50%; transform: translate(var(--sx, 0px), -46%); }
  .sc[data-scene="wavetype"].is-live .sc-beats { top: calc(50% + var(--by, 0px)); }
}

/* ---------- below 1100px: the head scrolls away above, the stage pins, the window under the words ---------- */

@media (max-width: 1099px) {
  /* the window a little taller than the demo here: the frame is tall, and the field under the paste is the product, not a gap (critic r2, N10) */
  .sc[data-scene="wavetype"] { --ww: min(720px, 100vw - 2 * var(--pad)); }
  /* --wh: on a short screen the scene takes back the empty field under the pasted text (place(), critic r6, M1) */
  .sc[data-scene="wavetype"] .wt-win { height: var(--wh, calc(360 * var(--k))); }
  /* and under about 766 px of height the window is smaller as a whole, so the words and the window fit above the step row */
  .sc[data-scene="wavetype"].is-live { --ww: min(720px, 100vw - 2 * var(--pad), 94svh); }
  .sc[data-scene="wavetype"] .sc-pin { grid-template-columns: 1fr; }
  .sc[data-scene="wavetype"] .sc-device { grid-column: 1; grid-row: 3; justify-self: center; }
  .sc[data-scene="wavetype"].is-live .sc-pin { height: auto; overflow: visible; display: block; padding: 0; }
  .sc[data-scene="wavetype"].is-live .sc-hero { position: relative; left: auto; top: auto; width: auto; transform: none; padding: 96px var(--pad) 8px; }
  .sc[data-scene="wavetype"].is-live .sc-stage { position: relative; inset: auto; height: 100svh; overflow: hidden; display: block; }
  .sc[data-scene="wavetype"].is-live .sc-steps { left: var(--gx); top: auto; bottom: calc(var(--bar) + 16px); gap: 18px; font-size: 14px; transform: none; }
  .sc[data-scene="wavetype"].is-live .sc-beats { left: var(--gx); right: var(--pad); top: var(--btop, 62px); width: auto; max-width: 40rem; transform: none; }
  /* --bt: the heading, by the width and by the height (9svh: 69 px at 1024 x 768, so a tablet's is not the largest of
     all); the gap under it and the subline follow it, so the three read as one block (critic r6, S1) */
  .sc[data-scene="wavetype"].is-live .sc-beats { --bt: clamp(2.1rem, min(8.6vw, 9svh), 5rem); }
  .sc[data-scene="wavetype"].is-live .sc-beat { transform: none; gap: calc(0.22 * var(--bt)); }
  .sc[data-scene="wavetype"].is-live .sc-beat__t { font-size: var(--bt); }
  .sc[data-scene="wavetype"].is-live .sc-beat__s { font-size: clamp(1.05rem, calc(0.29 * var(--bt)), 1.25rem); max-width: 36ch; }
  /* the window and the card above it sit in the middle of the room under the words (--top, set by the scene from
     where the words end); at the end, when the words are gone, the scene lifts them to the middle (--sy) */
  .sc[data-scene="wavetype"] { --gx: max(var(--pad), (100% - var(--ww)) / 2); }
  .sc[data-scene="wavetype"].is-live .sc-device {
    left: var(--gx); bottom: auto; top: var(--top, 50%); transform: translateY(var(--sy, 0px));
  }
}
/* a phone: the card keeps the product's proportions (480 wide, three lines, so the take starts "Hey Sarah um" in
   view through Stop and Land; critic r1, N2) and as large as the column allows: k about 0.7 at 375 */
@media (max-width: 600px) {
  .sc[data-scene="wavetype"] { --k: clamp(0.62px, calc((100vw - 40px) / 480), 0.8px); --fi: 18px; }
  .sc[data-scene="wavetype"] .wt-win { height: var(--wh, calc(440 * var(--k))); }
  .sc[data-scene="wavetype"].is-live .sc-beat { gap: 10px; }
  .sc[data-scene="wavetype"].is-live .sc-beat__t { font-size: clamp(2.2rem, 11.5vw, 3.6rem); }
  .sc[data-scene="wavetype"].is-live .sc-beat__s { font-size: 1.04rem; }
}