/* ===========================================================================
   REPLICAS : the real app windows, rebuilt in the browser.
   2026-07-25.

   WHY THIS EXISTS. The suite site may only show real UI (no diagrams, no
   marketing mockups), and the hub's story needs Take and Minutes on screen the
   way the hero already puts Crest's notch on screen: alive, and touchable. A
   static screenshot cannot show that Take's preview IS the export, or that a
   catch waits for your tap before it writes to Reminders. Those are the two
   claims that sell the suite, and both are behaviour.

   So these are not illustrations. Every colour below is lifted from the Swift
   the apps actually ship:
     Minutes: Theme.Palette.twoLanes, dark appearance (Core/Theme.swift)
     Take:    Theme.preset(.stageBlack)                (Core/Theme.swift)
   Every label, caption and control name is the string in the source. The ink
   ladders are the apps' own (Minutes 1.00/0.74/0.57 dark, which is the ladder
   that was raised to clear AA on every ground).

   HONESTY. A replica is real UI rebuilt, not a photograph, and it is never
   captioned as one. `.rep-cap` under every frame says what it is in the app's
   own voice, and it is not optional: see .rep-cap below.

   Structure is fluid, not scaled. A transform: scale() would keep pixel
   proportions and destroy legibility on a phone, so instead each window
   collapses: side rails hide first, then the inspector, and the part that
   carries the claim (the note, the canvas, the timeline) keeps the width.
   =========================================================================== */

/* --- The window frame, shared ------------------------------------------- */

.repwrap{ margin:0 0 6px; }

.rep{
  position:relative;
  border-radius:11px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 26px 70px -28px rgba(0,0,0,.9), 0 3px 14px rgba(0,0,0,.5);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;
  isolation:isolate;
}

/* The titlebar. Traffic lights are drawn, not fetched: three 11px dots at the
   real 8px pitch, and they are decoration, so they are aria-hidden in the JS. */
/* THREE COLUMNS, not a centred absolute overlay.
   The title used to be position:absolute spanning the whole bar, so at some
   widths its centred text ran underneath the buttons on the right. A grid gives
   the title its own column that physically cannot reach them, and it still
   centres because the outer columns are the same width. */
.rep-bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px;
  height:33px; padding:0 12px;
  background:var(--rep-chrome, #17181C);
  border-bottom:1px solid var(--rep-line, #2A2C2F);
  position:relative;
}
.rep-lights{ display:flex; gap:8px; flex:0 0 auto; }
.rep-lights i{ width:11px; height:11px; border-radius:50%; display:block; }
.rep-lights i:nth-child(1){ background:#f0655a; }
.rep-lights i:nth-child(2){ background:#f2bd4c; }
.rep-lights i:nth-child(3){ background:#61c556; }
.rep-title{
  text-align:center; min-width:0;
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  color:var(--rep-t2); pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Chrome that belongs to the app rather than the window sits after the lights
   and must clear the centred title on both sides. */
.rep-barR{ justify-self:end; display:flex; align-items:center; gap:8px; z-index:1; }
/* A control never shrinks below its own label: squeezed flex items were how the
   two buttons ended up touching. */
.rep .rep-barR > *{ flex:0 0 auto; white-space:nowrap; }

/* The caption. MANDATORY under every replica: it names this as a rebuild, so
   nothing on the page can read as a photograph of the app. */
.rep-cap{
  margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--t3);
}
.rep-cap b{ color:var(--t2); font-weight:500; }
.rep-cap kbd{
  font:500 11px/1 var(--mono); color:var(--t2);
  border:1px solid var(--hair3); border-radius:4px; padding:3px 5px;
  background:var(--fill); vertical-align:1px;
}

/* Focus is visible on every control in here, because these are real controls. */
.rep :focus-visible{ outline:2px solid var(--rep-accent); outline-offset:2px; border-radius:4px; }
.rep button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }

/* Every clock, every count, every scale reading. A figure that changes while
   you watch it must not shuffle the figures next to it, and these all change
   while you watch them. */
.rep .mono-l,
.rep-min .mtc, .rep-min .mdate, .rep-min .mrow-m, .rep-min .catch-c,
.rep-min .ln .tc, .rep-min .mlib-day, .rep-min .mlib-f,
.rep-take .ttc, .rep-take .ttl-f, .rep-take .zoom .zlbl, .rep-take .num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

@media (prefers-reduced-motion: reduce){
  .rep *{ transition:none !important; animation:none !important; }
}

/* --- the rail where the PAGE speaks ------------------------------------- */
/* Between the window and its caption, drawn in the SITE's type and the site's
   tokens rather than either app's. That is the whole reason it exists: a demo
   affordance ("Play meeting") and a demo truth ("no render step") are true of
   this page, not of the app, and nothing said here may be mistaken for a
   string the Swift ships. Inside the window frame, every label is the app's.
   Out here, none of them are. */
.rep-demo{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 0; }
.rep-demo[hidden]{ display:none; }
.rep-demo button{
  /* Explicitly sized to the minimum target, not sized by its own text. */
  min-height:44px; min-width:44px; padding:0 15px; border-radius:9px;
  border:1px solid var(--hair3); background:var(--fill); color:var(--t2);
  font:500 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  cursor:pointer; transition:color .16s ease-out, border-color .16s ease-out;
}
.rep-demo button:hover{ color:var(--t1); }
.rep-demo button:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.rep-demo .note{ margin:0; font-size:12.5px; line-height:1.5; color:var(--t3); flex:1 1 240px; min-width:0; }

/* =======================================================================
   MINUTES : Two Lanes, dark appearance.
   Palette: ink #E9EAE7 · bg #17181A · side #131416 · read #1B1D1F
            band #202224 · line #2A2C2F · lineStrong #3A3D40
            accent #6FB6A3 · accentInk #10201C · rec #DD6A5E
   ======================================================================= */

.rep-min{
  --rep-ink:#E9EAE7;
  --rep-t1:rgba(233,234,231,1);
  --rep-t2:rgba(233,234,231,.74);
  --rep-t3:rgba(233,234,231,.57);
  --rep-bg:#17181A; --rep-side:#131416; --rep-read:#1B1D1F; --rep-band:#202224;
  --rep-line:#2A2C2F; --rep-line2:#3A3D40;
  --rep-accent:#6FB6A3; --rep-accent-ink:#10201C;
  --rep-accent-wash:rgba(111,182,163,.13);
  --rep-rec:#DD6A5E;
  /* The needs-you channel, and the ONLY thing in this window allowed to use
     it: a catch that has just landed and has not been dealt with. Teal is the
     app's yes, red is its recording light, so neither can carry "this one is
     waiting on you" without meaning two things at once. */
  --rep-need:#D9A24C;
  --rep-need-wash:rgba(217,162,76,.15);
  --rep-chrome:#131416;
  background:var(--rep-bg);
}
/* A HEIGHT, not a minimum. The transcript arrives line by line, and a window
   that grew by a line every second would walk the rest of the page down the
   screen while you were reading it. The reading room scrolls inside instead,
   which is also what the real window does. Sized so the band can hold all
   three catches AND the whole set of minutes below them without either one
   needing to be scrolled to at rest. */
.rep-min .rep-body{ display:grid; grid-template-columns:238px 1fr; height:812px; }

/* --- The library (side ground) --- */
/* min-height:0 on both columns, and it is load-bearing. A grid item defaults
   to min-height:auto, which means it refuses to shrink below its own content
   and simply overflows the row instead. That is exactly what happened when the
   catch band grew to three rows: the reading column stood 854px tall inside a
   620px row and the whole waveform transport was clipped away by .rep's
   overflow:hidden, with no scrollbar to say so. */
.rep-min .mlib{
  background:var(--rep-side); border-right:1px solid var(--rep-line);
  padding:14px 0 0; overflow:hidden; min-height:0;
  display:flex; flex-direction:column;
}
.rep-min .mlib-h{ padding:0 12px 10px; }
/* Meetings / People: the library's own two tabs. */
.rep-min .mtabs{ display:flex; gap:2px; }
.rep-min .mtabs button{
  font-size:11.5px; font-weight:500; color:var(--rep-t3);
  padding:4px 9px; border-radius:6px;
}
.rep-min .mtabs button.on{ color:var(--rep-ink); background:rgba(255,255,255,.07); }
/* The footer line carries real figures, which is the library's own rule:
   everything true, nothing decorative. */
.rep-min .mlib-f{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  padding:9px 12px 11px; border-top:1px solid var(--rep-line);
  font:400 10px/1.3 var(--mono); color:var(--rep-t3);
}
.rep-min .mlib-f > span:first-child{ flex:1 1 auto; min-width:0; }
.rep-min .gear{ flex:0 0 auto; display:block; width:13px; height:13px; color:var(--rep-t3); }
.rep-min .gear svg{ width:13px; height:13px; display:block; }
.mono-l{ font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rep-t3); }
.rep-min .mlib-day{
  font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--rep-t3); padding:14px 14px 7px;
}
.rep-min .mrow{
  display:block; width:100%; text-align:left; padding:9px 14px 10px;
  border-left:2px solid transparent; position:relative;
  transition:background .12s ease;
}
.rep-min .mrow:hover{ background:rgba(255,255,255,.035); }
.rep-min .mrow.on{ background:var(--rep-accent-wash); border-left-color:var(--rep-accent); }
.rep-min .mrow-t{ font-size:12.5px; font-weight:500; color:var(--rep-t1); letter-spacing:-.005em; }
.rep-min .mrow.on .mrow-t{ color:var(--rep-ink); }
.rep-min .mrow-m{ font:400 10.5px/1.3 var(--mono); color:var(--rep-t3); margin-top:3px; }
/* The talk shape: Two Lanes' row glyph. Two stacked bar rows, them over you,
   so the row says at a glance who did the talking. Real widths, no animation. */
.rep-min .talk{ display:flex; flex-direction:column; gap:2px; margin-top:7px; }
.rep-min .talk span{ display:flex; gap:2px; height:3px; }
.rep-min .talk i{ display:block; height:3px; border-radius:1px; background:var(--rep-t3); opacity:.55; }
.rep-min .talk span.you i{ background:var(--rep-accent); opacity:.8; }

/* --- The reading room --- */
.rep-min .mread{ background:var(--rep-read); display:flex; flex-direction:column; min-width:0; min-height:0; }
/* WHO GIVES WAY WHEN THE ROOM RUNS OUT, stated rather than left to flexbox.
   The masthead, the mode switch and the transport never shrink: a window with
   no transport is a window that lost its controls, which is what happened when
   the replica was dropped in a 560px column and the three catches, each of
   them now wrapping to three lines, pushed the whole waveform out through the
   bottom of a fixed height window and overflow:hidden ate it.
   The reading room absorbs essentially all of the squeeze (its shrink factor
   is two hundred times the band's, so flexbox's proportional shrinking is
   ordered in practice), and only once it is at nothing does the catch band
   give way, by scrolling rather than by being cut. */
.rep-min .mhead{ padding:20px 26px 15px; border-bottom:1px solid var(--rep-line); flex:0 0 auto; }
.rep-min .mtitle{
  font-size:21px; font-weight:600; letter-spacing:-.015em; color:var(--rep-ink);
  margin:6px 0 0;
}
.rep-min .mdate{ font:400 11px/1.4 var(--mono); color:var(--rep-t3); margin-top:6px; }

/* The catch band: Two Lanes puts catches directly under the masthead, and they
   get the room's whole colour budget. */
.rep-min .mband{
  background:var(--rep-band); border-bottom:1px solid var(--rep-line); padding:12px 26px 14px;
  flex:0 1 auto; min-height:0; overflow-y:auto;
}
.rep-min .mband-h{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.rep-min .mband-h .dot{ width:5px; height:5px; border-radius:50%; background:var(--rep-accent); }
.rep-min .catch{
  display:flex; align-items:flex-start; gap:12px;
  padding:9px 0; border-top:1px solid var(--rep-line);
}
.rep-min .catch:first-of-type{ border-top:0; }
.rep-min .catch-b{ flex:1 1 auto; min-width:0; }
.rep-min .catch-t{ font-size:13px; font-weight:500; color:var(--rep-t1); line-height:1.35; }
.rep-min .catch-c{ font:400 10.5px/1.45 var(--mono); color:var(--rep-t3); margin-top:3px; }
/* The grounding quote. This is the guarantee, not a flourish: a catch that
   cannot cite the transcript never reaches this band at all. */
.rep-min .catch-q{
  font-size:11.5px; line-height:1.45; color:var(--rep-t2);
  border-left:2px solid var(--rep-line2); padding-left:9px; margin-top:7px;
}
.rep-min .catch-a{ display:flex; align-items:center; gap:7px; flex:0 0 auto; padding-top:1px; }
/* Arriving. A damped settle, not a bounce: the row is reporting a fact, and a
   fact that springs into place reads as a notification rather than a finding. */
.rep-min .catch.arrive{ animation:repPop 240ms cubic-bezier(.2,.85,.3,1) both; }
@keyframes repPop{ from{ opacity:0; transform:scale(.975) translateY(3px); } to{ opacity:1; transform:none; } }
/* Waiting on you. One amber wash on arrival, then a standing amber rule until
   you touch it or the meeting ends; nothing else in this window may go amber. */
.rep-min .catch.needs{ box-shadow:inset 2px 0 0 var(--rep-need); padding-left:11px; }
.rep-min .catch.arrive.needs{
  animation:repPop 240ms cubic-bezier(.2,.85,.3,1) both,
            repNeed 900ms ease-out 240ms 1 both;
}
@keyframes repNeed{ from{ background:var(--rep-need-wash); } to{ background:transparent; } }
.rep-min .btnA{
  font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:6px;
  background:var(--rep-accent); color:var(--rep-accent-ink);
  transition:filter .12s ease;
}
.rep-min .btnA:hover{ filter:brightness(1.08); }
.rep-min .btnG{
  font-size:11.5px; font-weight:500; padding:6px 9px; border-radius:6px;
  color:var(--rep-t3); border:1px solid var(--rep-line2);
}
.rep-min .btnG:hover{ color:var(--rep-t1); }
.rep-min .btnT{ font-size:11.5px; font-weight:500; color:var(--rep-t3); padding:6px 2px; text-decoration:underline; text-underline-offset:2px; }
.rep-min .btnT:hover{ color:var(--rep-t1); }
.rep-min .added{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--rep-accent); }
.rep-min .added svg{ width:12px; height:12px; }
.rep-min .catch.done .catch-t{ color:var(--rep-t2); }

/* Reading mode: Minutes · Script · Your notes */
.rep-min .mseg{ display:flex; gap:2px; padding:11px 26px 0; flex:0 0 auto; }
.rep-min .mseg button{
  font-size:11.5px; font-weight:500; color:var(--rep-t3);
  padding:5px 10px; border-radius:6px;
}
.rep-min .mseg button.on{ color:var(--rep-ink); background:rgba(255,255,255,.07); }
/* min-height:0 is what lets a flex child actually scroll instead of growing
   its parent, and this one has to scroll: fourteen lines of transcript do not
   fit and must not be allowed to stretch the window. */
.rep-min .mbody{ padding:16px 26px 22px; overflow-y:auto; overflow-x:hidden; flex:1 200 auto; min-height:0; }
.rep-min .mh{ margin:0 0 8px; font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rep-t3); }
.rep-min .mp{ font-size:13.5px; line-height:1.62; color:var(--rep-t1); margin:0 0 18px; max-width:64ch; }
.rep-min .mul{ list-style:none; margin:0 0 18px; padding:0; max-width:64ch; }
.rep-min .mul li{ font-size:13.5px; line-height:1.55; color:var(--rep-t1); padding-left:16px; position:relative; margin-bottom:7px; }
.rep-min .mul li:before{ content:""; position:absolute; left:2px; top:8px; width:4px; height:4px; border-radius:50%; background:var(--rep-t3); }

/* The script, as a two lane score: them left, you right. */
.rep-min .score{ display:flex; flex-direction:column; gap:11px; }
.rep-min .ln{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.rep-min .ln .u{ min-width:0; }
.rep-min .ln .u.r{ grid-column:2; text-align:right; }
.rep-min .ln .lab{ font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--rep-t3); margin-bottom:4px; }
.rep-min .ln .tx{ font-size:13px; line-height:1.55; color:var(--rep-t1); }
.rep-min .ln .u.r .tx{ color:var(--rep-t1); }
.rep-min .ln .tc{ font:400 10px/1 var(--mono); color:var(--rep-t3); }
.rep-min .ln mark{ background:var(--rep-accent-wash); color:var(--rep-ink); border-radius:2px; padding:0 2px; }
/* A line arriving. 170ms, ease out, opacity and transform only. */
.rep-min .ln.arrive{ animation:repLine 170ms ease-out both; }
@keyframes repLine{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
/* Two Lanes' one named motion: the playhead walks the score and the current
   line lifts to full white. Only while it is walking; a finished transcript
   has no current line and dimming thirteen of fourteen would be a lie. */
.rep-min .score.live .ln .tx{ color:var(--rep-t2); transition:color 170ms ease-out; }
.rep-min .score.live .ln.now .tx{ color:var(--rep-ink); }

/* The line's own footer: its talk shape, then its timecode. The shape is the
   library's glyph at line scale, in the lane's own colour. */
.rep-min .lnf{ display:flex; align-items:center; gap:8px; margin-top:5px; }
.rep-min .ln .u.r .lnf{ flex-direction:row-reverse; }
.rep-min .lnw{ display:block; width:46px; flex:0 0 auto; }
.rep-min .lnw span{ display:flex; gap:2px; height:3px; }
.rep-min .lnw i{ display:block; height:3px; border-radius:1px; background:var(--rep-t3); opacity:.5; }
.rep-min .lnw span.you i{ background:var(--rep-accent); opacity:.75; }

/* The writing beat. RecordingSession's four stages, in its own two labels
   each: a bare spinner would not say which of the four is slow. */
.rep-min .mstage{ display:flex; flex-direction:column; gap:11px; margin:2px 0 0; }
.rep-min .mstage-r{ display:flex; align-items:center; gap:10px; font-size:13.5px; line-height:1.4; }
.rep-min .mstage-r .g{
  width:13px; height:13px; border-radius:50%; flex:0 0 auto; position:relative;
  border:1.5px solid var(--rep-line2); transition:border-color .16s ease-out, background .16s ease-out;
}
.rep-min .mstage-r.now .g{ border-color:var(--rep-accent); }
.rep-min .mstage-r.done .g{ background:var(--rep-accent); border-color:var(--rep-accent); }
.rep-min .mstage-r.done .g:after{
  content:""; position:absolute; left:2.5px; top:3px; width:5px; height:2.5px;
  border-left:1.5px solid var(--rep-accent-ink); border-bottom:1.5px solid var(--rep-accent-ink);
  transform:rotate(-45deg);
}
.rep-min .mstage-r .l{ color:var(--rep-t3); }
.rep-min .mstage-r.now .l{ color:var(--rep-t1); }
.rep-min .mstage-r.done .l{ color:var(--rep-t2); }

/* The waveform transport, which is also the scrub bar. */
.rep-min .mfoot{ border-top:1px solid var(--rep-line); background:var(--rep-band); padding:11px 26px 13px; display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.rep-min .mplay{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; position:relative; }
/* The disc is 28px because that is what the app draws; the TARGET is 44px,
   which is what a thumb needs. The two are different measurements and only
   one of them is allowed to be small. */
.rep-min .mplay:before{
  content:""; position:absolute; left:8px; top:8px; width:28px; height:28px;
  border-radius:50%; background:rgba(255,255,255,.09);
}
.rep-min .mplay svg{ width:11px; height:11px; fill:var(--rep-t1); position:relative; }
/* The hit area is the full height of the row; the bar drawn inside it is 26px,
   the height the app draws. touch-action:none so a drag scrubs instead of
   scrolling the page out from under your finger. */
.rep-min .mscrub{
  flex:1 1 auto; min-width:0; height:44px; display:flex; align-items:center;
  cursor:pointer; touch-action:none;
}
.rep-min .wave{ position:relative; flex:1 1 auto; height:26px; min-width:0; }
/* Two copies of the same shape, the played one clipped to the position.
   Clipping is a paint; re-classing ninety-six bars a frame was ninety-six
   style recalculations, and this bar has to survive being dragged. */
.rep-min .wv-base,.rep-min .wv-play{
  position:absolute; inset:0; display:flex; align-items:center; gap:2px;
}
.rep-min .wv-base i,.rep-min .wv-play i{ display:block; flex:1 1 auto; border-radius:1px; }
.rep-min .wv-base i{ background:var(--rep-t3); opacity:.45; }
.rep-min .wv-play i{ background:var(--rep-accent); opacity:.9; }
/* The knob. A scrub bar with no knob is a progress bar, and nobody drags a
   progress bar. */
.rep-min .wv-knob{
  position:absolute; left:0; top:50%; width:2px; height:34px; margin-top:-17px;
  background:var(--rep-ink); border-radius:1px; pointer-events:none;
  box-shadow:0 0 6px rgba(0,0,0,.55);
}
.rep-min .wv-knob:after{
  content:""; position:absolute; left:50%; top:-5px; width:11px; height:11px;
  margin-left:-5.5px; border-radius:50%; background:var(--rep-ink);
  box-shadow:0 1px 3px rgba(0,0,0,.6);
}
.rep-min .mscrub:focus-visible{ outline:2px solid var(--rep-accent); outline-offset:2px; border-radius:4px; }
.rep-min .mtc{ font:400 11px/1 var(--mono); color:var(--rep-t3); flex:0 0 auto; }

@media (max-width:820px){
  .rep-min .rep-body{ grid-template-columns:1fr; height:auto; }
  .rep-min .mlib{ display:none; }
  /* Stacked, the reading area gets a stated height of its own so a catch
     arriving is the only thing that changes the window's size. */
  .rep-min .mbody{ height:250px; flex:0 0 auto; }
  .rep-min .mhead,.rep-min .mband,.rep-min .mbody,.rep-min .mfoot{ padding-left:16px; padding-right:16px; }
  .rep-min .mseg{ padding-left:16px; padding-right:16px; }
  .rep-min .catch{ flex-direction:column; gap:8px; }
  .rep-min .ln{ grid-template-columns:1fr; gap:0; }
  .rep-min .ln .u.r{ grid-column:1; text-align:left; padding-left:14px; border-left:2px solid var(--rep-accent); }
  .rep-min .ln .u.r .lnf{ flex-direction:row; }
  .rep-min .mfoot{ gap:10px; }
  /* Ninety-six bars and a 2px gap is 190px of gap in a 230px bar, so on a
     phone the shape was mostly the spaces between it. */
  .rep-min .wv-base,.rep-min .wv-play{ gap:1px; }
}

/* =======================================================================
   TAKE : Stage Black.
   Palette: accent #4F82EE · window #0B0B0D · panelRaised #17181C · well #000
            clipTrack #34373F · zoomTrack #4F82EE · captionTrack #3E8A84
            audioTrack #4E5560 · waveTrack #6A7080
   ======================================================================= */

.rep-take{
  --rep-ink:#F2F3F5;
  --rep-t1:rgba(242,243,245,.94);
  --rep-t2:rgba(242,243,245,.62);
  --rep-t3:rgba(242,243,245,.40);
  --rep-bg:#0B0B0D; --rep-panel:#17181C; --rep-well:#000;
  --rep-line:rgba(255,255,255,.09); --rep-line2:rgba(255,255,255,.16);
  --rep-accent:#4F82EE; --rep-accent-ink:#fff;
  --rep-clip:#34373F; --rep-zoom:#4F82EE; --rep-cap:#3E8A84; --rep-audio:#4E5560; --rep-wave:#6A7080;
  --rep-chrome:#111214;
  background:var(--rep-bg);
}
.rep-take .rep-bar{ border-bottom-color:var(--rep-line); }
.rep-take .tbtn{
  font-size:11.5px; font-weight:500; color:var(--rep-t2);
  padding:5px 9px; border-radius:6px; border:1px solid var(--rep-line);
  display:inline-flex; align-items:center; gap:5px;
}
.rep-take .tbtn:hover{ color:var(--rep-ink); border-color:var(--rep-line2); }
.rep-take .tbtn.pri{ background:var(--rep-accent); border-color:transparent; color:#fff; font-weight:600; }
.rep-take .tbtn svg{ width:11px; height:11px; }
/* Library and Export sit in a 33px titlebar and draw at the size the app draws
   them, which is well under a thumb. The DRAWING stays; the target grows past
   it invisibly, stopping 3px short on each side so the two cannot swallow each
   other's presses across the 8px gap between them. */
.rep-take .rep-barR .tbtn{ position:relative; }
.rep-take .rep-barR .tbtn:after{ content:""; position:absolute; inset:-10px -3px; }

.rep-take .rep-body{ display:grid; grid-template-columns:1fr 236px; min-height:504px; }
.rep-take .tmain{ display:flex; flex-direction:column; min-width:0; }

/* The stage. Black well, the footage the only lit thing on screen. */
.rep-take .tstage{
  flex:1 1 auto; background:var(--rep-well); display:grid; place-items:center;
  padding:20px; min-height:236px; position:relative; overflow:hidden;
}
.rep-take .tcanvas{
  position:relative; width:100%; max-width:560px; aspect-ratio:16/10;
  border-radius:10px; overflow:hidden;
  /* The backdrop, which is a real Take feature: a flat wash the frame sits on. */
  background:linear-gradient(150deg,#1d2432,#141822 60%,#101319);
  display:grid; place-items:center;
}
/* The recorded frame inside the backdrop, with Take's padding + corner radius.
   NO TRANSITION, deliberately. The scale is a pure function of the playhead's
   time, ramped in the JS, so the canvas is exactly where the timeline says it
   is on every frame. A CSS transition on top of that would put the picture
   half a second behind the finger dragging it, which is precisely the lag the
   whole "the preview you scrub IS the file" claim exists to deny. */
.rep-take .tframe{
  position:absolute; inset:7%; border-radius:7px; overflow:hidden;
  background:#0F1113; border:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.9);
  transform-origin:50% 50%;
  will-change:transform;
}
/* What the recording shows: the Minutes window, which is the continuity payoff
   for the hub's story. Drawn, not screenshotted, at replica scale. */
/* The recorded frame's content: Minutes, in Minutes' own colours, at a scale
   that stays readable when a 2x zoom lands on it. Percentages throughout, so it
   is resolution-independent inside the canvas. */
.rep-take .tshot{ position:absolute; inset:0; display:flex; flex-direction:column; background:#1B1D1F; }
.rep-take .tshot .b{
  height:6.5%; min-height:11px; background:#131416; border-bottom:1px solid #2A2C2F;
  display:flex; align-items:center; gap:3px; padding:0 6px; position:relative;
}
.rep-take .tshot .b i{ width:4px; height:4px; border-radius:50%; background:#3A3D40; flex:0 0 auto; }
.rep-take .tshot .b .t{
  position:absolute; left:0; right:0; text-align:center;
  font-size:6.5px; font-weight:600; color:rgba(233,234,231,.5); letter-spacing:.02em;
}
.rep-take .tshot .c{ flex:1; display:grid; grid-template-columns:27% 1fr; min-height:0; }
.rep-take .tshot .s{ background:#131416; border-right:1px solid #2A2C2F; padding:7px 6px; }
.rep-take .tshot .s u{ display:block; height:3px; border-radius:1.5px; background:#2F3234; margin-bottom:6px; width:84%; }
.rep-take .tshot .s u.h{ width:34%; height:2.5px; background:#26292B; margin-bottom:8px; }
.rep-take .tshot .s u.h2{ width:34%; height:2.5px; background:#26292B; margin:10px 0 8px; }
.rep-take .tshot .s u.on{ background:rgba(111,182,163,.55); width:92%; height:4px; }
.rep-take .tshot .r{ padding:9px 10px; min-width:0; }
.rep-take .tshot .r em{ display:block; height:6px; width:56%; border-radius:2px; background:#575B5D; margin-bottom:5px; }
.rep-take .tshot .r .meta{ display:block; height:3px; width:38%; border-radius:1.5px; background:#33373A; margin-bottom:9px; }
/* The catch band, which is the thing worth zooming into. */
.rep-take .tshot .r .band{
  display:flex; align-items:center; gap:5px; background:#202224;
  border-top:1px solid #2A2C2F; border-bottom:1px solid #2A2C2F;
  margin:0 -10px 9px; padding:6px 10px;
}
.rep-take .tshot .r .band b{ width:4px; height:4px; border-radius:50%; background:#6FB6A3; flex:0 0 auto; }
.rep-take .tshot .r .band u{ flex:1 1 auto; height:3px; border-radius:1.5px; background:#42474A; margin:0; }
.rep-take .tshot .r .band .pill{
  flex:0 0 auto; width:26%; height:9px; border-radius:3px; background:#6FB6A3;
}
.rep-take .tshot .r u{ display:block; height:3px; border-radius:1.5px; background:#2F3234; margin-bottom:5px; width:100%; }
.rep-take .tshot .r u.hh{ width:26%; height:2.5px; background:#26292B; margin-top:9px; }
.rep-take .tshot .r u:nth-last-child(1){ width:58%; }
.rep-take .tshot .r u:nth-last-child(4){ width:88%; }

/* The cursor, redrawn rather than filmed, which is a real Take property. */
.rep-take .tcur{
  position:absolute; width:13px; height:13px; z-index:3;
  transition:left .6s var(--spring, cubic-bezier(.32,1.18,.36,1)), top .6s var(--spring, cubic-bezier(.32,1.18,.36,1));
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
.rep-take .tclick{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:2px solid var(--rep-accent); opacity:0; z-index:2; pointer-events:none;
}
.rep-take .tclick.go{ animation:repPing .62s ease-out; }
@keyframes repPing{ 0%{ transform:scale(.3); opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }

/* The privacy blur box, which hugs its region through a zoom. */
.rep-take .tblur{
  position:absolute; z-index:2; border-radius:3px;
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  background:rgba(120,130,150,.20); border:1px solid rgba(255,255,255,.14);
  opacity:0; transition:opacity .2s ease;
}
.rep-take .tblur.on{ opacity:1; }
/* The camera bubble: a real live overlay, cornered. */
.rep-take .tcam{
  position:absolute; z-index:4; width:22%; aspect-ratio:1; border-radius:50%;
  right:5%; bottom:5%; overflow:hidden; opacity:0; transform:scale(.8);
  background:radial-gradient(circle at 42% 34%,#5c6a7d,#2b323d 62%,#1a1f27);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition:opacity .22s ease, transform .28s var(--spring, cubic-bezier(.32,1.18,.36,1));
}
.rep-take .tcam.on{ opacity:1; transform:scale(1); }
.rep-take .tcam:after{
  content:""; position:absolute; left:50%; top:52%; width:44%; aspect-ratio:1;
  transform:translate(-50%,-24%); border-radius:50% 50% 44% 44%;
  background:radial-gradient(circle at 50% 40%,#8d99a8,#5a6474);
}
.rep-take .tzlab{
  position:absolute; left:12px; top:12px; z-index:5;
  font:600 10px/1 var(--mono); letter-spacing:.04em; color:#fff;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14);
  padding:5px 7px; border-radius:5px; opacity:0; transition:opacity .2s ease;
}
.rep-take .tzlab.on{ opacity:1; }
/* skipChip: the app prints "×4" on an idle span it is playing at four times
   speed, and so does this, on the canvas, while the clock races through it. */
.rep-take .tskip{
  position:absolute; right:12px; top:12px; z-index:5;
  font:600 10px/1 var(--mono); letter-spacing:.04em; color:#fff;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14);
  padding:5px 7px; border-radius:5px; opacity:0; transition:opacity .16s ease-out;
}
.rep-take .tskip.on{ opacity:1; }

/* Transport under the stage. */
.rep-take .ttrans{
  display:flex; align-items:center; gap:12px; padding:9px 14px;
  background:var(--rep-panel); border-top:1px solid var(--rep-line);
}
.rep-take .ticon{ width:26px; height:26px; border-radius:6px; display:grid; place-items:center; color:var(--rep-t2); }
.rep-take .ticon:hover{ background:rgba(255,255,255,.06); color:var(--rep-ink); }
.rep-take .ticon svg{ width:13px; height:13px; fill:currentColor; }
.rep-take .ticon.pri{ background:var(--rep-accent); color:#fff; }
.rep-take .ttc{ font:400 11.5px/1 var(--mono); color:var(--rep-t2); flex:0 0 auto; font-variant-numeric:tabular-nums; }
.rep-take .tspacer{ flex:1 1 auto; }

/* The timeline. Real track colours, real interactions: click to seek, click an
   empty spot on the zoom row to plant a zoom. */
.rep-take .ttl{ background:#0E0F11; border-top:1px solid var(--rep-line); padding:10px 14px 12px; }
.rep-take .ttl-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.rep-take .ttl-h{ min-width:0; }
.rep-take .ttl-h .hint{
  font-size:10.5px; color:var(--rep-t3); margin-left:auto;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Label gutter + tracks. The labels are OUTSIDE the tracks: drawn on top of the
   waveform they were unreadable, and a label nobody can read is decoration. */
.rep-take .ttl-rows{ display:flex; gap:9px; align-items:flex-start; }
.rep-take .ttl-labels{ flex:0 0 58px; display:flex; flex-direction:column; }
.rep-take .ttl-labels span{
  font:500 9px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--rep-t3); display:flex; align-items:center; justify-content:flex-end;
  margin-bottom:5px;
}
/* Heights track the rows they name, so the gutter cannot drift out of line. */
.rep-take .ttl-labels .l-clip{ height:30px; }
/* The zoom row is 44px because a zoom block is the one thing on this timeline
   you are meant to pick up and move, and a thing you pick up needs a thumb's
   worth of it to pick up. Nothing else on the row grew: the block fills it. */
.rep-take .ttl-labels .l-zoom{ height:44px; }
.rep-take .ttl-labels .l-cap{ height:26px; }
/* One gesture surface. Drag anywhere here and you are scrubbing, unless you
   started on a block, in which case you are moving the block. */
.rep-take .ttl-tracks{ position:relative; flex:1 1 auto; min-width:0; cursor:pointer; touch-action:none; }
.rep-take .ttl-tracks.scrubbing{ cursor:grabbing; }

.rep-take .track{ position:relative; height:26px; border-radius:5px; margin-bottom:5px; background:rgba(255,255,255,.035); overflow:hidden; }
.rep-take .track.clip{ background:var(--rep-clip); height:30px; }
.rep-take .track.zoomrow{ height:44px; }
.rep-take .zoom{
  position:absolute; top:3px; bottom:3px; border-radius:5px; background:var(--rep-zoom);
  display:flex; align-items:center; justify-content:center; gap:6px; padding:0 6px;
  overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.35);
  cursor:grab; touch-action:none;
  transition:box-shadow .16s ease-out;
}
.rep-take .zoom.grabbing{ cursor:grabbing; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 8px 20px -8px rgba(0,0,0,.9); }
.rep-take .zoom .zlbl{ font:600 9px/1 -apple-system,system-ui,sans-serif; color:#fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4); }
/* The grab affordance. The hint line says "drag a zoom to move it"; the block
   has to say the same thing without being read. */
.rep-take .zoom .grip{ display:flex; gap:2px; flex:0 0 auto; }
.rep-take .zoom .grip i{ display:block; width:1.5px; height:14px; border-radius:1px; background:rgba(255,255,255,.5); }
.rep-take .zoom.sel{ box-shadow:0 0 0 2px #fff; }
.rep-take .skip{ position:absolute; top:5px; bottom:5px; border-radius:3px; background:repeating-linear-gradient(120deg,rgba(255,255,255,.16) 0 3px,transparent 3px 7px); border:1px solid rgba(255,255,255,.14); }
.rep-take .cap{ position:absolute; top:6px; bottom:6px; border-radius:3px; background:var(--rep-cap); opacity:.85; }
.rep-take .wv{ position:absolute; inset:0; display:flex; align-items:center; gap:1px; padding:0 2px; }
.rep-take .wv i{ flex:1 1 auto; background:var(--rep-wave); opacity:.5; border-radius:1px; }
/* left:0 and moved by transform: the playhead is written sixty times a second
   while playing, and `left` would be sixty layouts. */
.rep-take .ph{ position:absolute; left:0; top:-4px; bottom:-4px; width:2px; background:#fff; z-index:3; pointer-events:none; box-shadow:0 0 6px rgba(0,0,0,.7); will-change:transform; }
.rep-take .ph:before{ content:""; position:absolute; left:-4px; top:-3px; width:10px; height:7px; border-radius:2px; background:#fff; }
.rep-take .ttl-f{ display:flex; gap:8px; align-items:baseline; margin-top:9px; font:400 10.5px/1.4 var(--mono); color:var(--rep-t3); flex-wrap:wrap; }

/* The inspector. */
.rep-take .tins{ background:var(--rep-panel); border-left:1px solid var(--rep-line); padding:14px 14px 18px; overflow:hidden; }
.rep-take .isec{ margin-bottom:17px; }
.rep-take .isec > .mono-l{ display:block; margin-bottom:9px; color:var(--rep-t3); }
.rep-take .irow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; }
.rep-take .irow span{ font-size:12px; color:var(--rep-t2); }
.rep-take .sw{
  width:34px; height:20px; border-radius:10px; background:rgba(255,255,255,.13);
  position:relative; flex:0 0 auto; transition:background .16s ease;
}
.rep-take .sw:after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition:transform .16s var(--spring, cubic-bezier(.32,1.18,.36,1));
}
.rep-take .sw.on{ background:var(--rep-accent); }
.rep-take .sw.on:after{ transform:translateX(14px); }
.rep-take .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.rep-take .chip{
  font-size:11px; font-weight:500; color:var(--rep-t2); padding:5px 9px;
  border-radius:6px; border:1px solid var(--rep-line);
}
.rep-take .chip.on{ color:#fff; background:var(--rep-accent); border-color:transparent; }
.rep-take .bd{ display:flex; gap:6px; }
.rep-take .bd button{ width:26px; height:26px; border-radius:6px; border:1px solid var(--rep-line); }
.rep-take .bd button.on{ box-shadow:0 0 0 2px var(--rep-accent); border-color:transparent; }
.rep-take .inote{ font-size:11px; line-height:1.5; color:var(--rep-t3); margin:8px 0 0; }
.rep-take .sl{ position:relative; height:3px; border-radius:2px; background:rgba(255,255,255,.13); margin:11px 0 4px; }
.rep-take .sl i{ position:absolute; left:0; top:0; bottom:0; border-radius:2px; background:var(--rep-accent); }
.rep-take .sl b{ position:absolute; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.6); }

@media (max-width:900px){
  .rep-take .rep-body{ grid-template-columns:1fr; }
  .rep-take .tins{ display:none; }
}
/* Hidden earlier than it strictly has to be: an instruction nobody can
   read in full is worse than no instruction. */
@media (max-width:760px){
  .rep-take .ttl-h .hint{ display:none; }
}