/* Ember row (Kairos Automations 05): film left · text right. Variant I "Focus".
   One Ember component at a time, large and centred on a quiet dark ground, handing over to the next
   with a shared-element morph: Groups → (the 6+ months row opens) Composer → (collapses) Schedule →
   Replies → (the booked € flies) Numbers. Everything scoped under #ember, film classes mi-, keyframes m-.
   Film = a 100 × 80 em stage (1em = 1cqw of the 5:4 frame; a touch larger in narrow frames). */
#ember{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
@media (max-width:900px){#ember{grid-template-columns:1fr}}
#ember{--ink:#080808;--paper:#fcfcfc;--mute:#8d8d8d;--line:#262626;--red:#ff2d3f;
  --sans:'Host Grotesk','Helvetica Neue',Arial,sans-serif;--serif:'Gambetta','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.25,.64,1);--gut:clamp(16px,2.2vw,32px)}

/* ---------- text column (same rules as the live Echo / Vouch rows) ---------- */
#ember .txt{max-width:560px}
#ember .t-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#ember .e-logo{display:flex;align-items:center;gap:12px}
#ember .e-logo img{height:18px}
#ember .e-logo span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
#ember .h{font-weight:500;text-transform:uppercase;font-size:clamp(34px,3.7vw,62px);line-height:.92;letter-spacing:-.035em;margin-top:28px}
#ember .h em{font-size:.62em;vertical-align:.22em;margin-right:.08em}
#ember .intro{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:rgba(252,252,252,.78);margin-top:22px}
#ember .intro em{color:var(--paper)}
#ember .caps{list-style:none;margin-top:30px;border-top:1px solid var(--line);padding:0}
#ember .caps li{display:grid;grid-template-columns:1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
#ember .caps .n{display:none}
#ember .caps li>div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)}
#ember .caps li:hover>div,#ember .caps li.on>div{grid-template-rows:auto 1fr}
#ember .caps b{font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;transition:color .6s ease}
#ember .caps p{font-size:13.5px;color:var(--mute);min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .5s var(--ease)}
#ember .caps p::before{content:"";display:block;height:2px}
#ember .caps li:hover b,#ember .caps li.on b{color:var(--red)}
#ember .caps li:hover p,#ember .caps li.on p{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .8s var(--ease) .2s}
#ember.noanim .caps li>div{transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)!important}
#ember.noanim .caps b{transition:color .6s ease!important}
#ember.noanim .caps p{transition:opacity .35s ease,transform .5s var(--ease)!important}
#ember .txt .btn-line{margin-top:30px}
#ember .media{position:relative}
#ember .frame{position:relative;width:100%;aspect-ratio:5/4;container-type:inline-size;isolation:isolate;overflow:hidden;border-radius:2.4cqw}
#ember.noanim .frame *,#ember.noanim .frame *::before,#ember.noanim .frame *::after{transition:none!important}
@media (prefers-reduced-motion:reduce){#ember *{transition:none!important;animation:none!important}}

/* ============================================================
   Film materials = the approved Ember app, dark theme (Geist, amber accent)
   ============================================================ */
#ember{--m-bg:#0E0E0D;--m-sf:#191917;--m-sf2:#20201E;--m-sf3:#2A2A27;--m-ln:rgba(255,250,240,.075);--m-ln2:rgba(255,250,240,.13);
  --m-tx:#F4F2EE;--m-tx2:#A6A29B;--m-tx3:#706C66;--m-acc:#F0903A;--m-acci:#F5A458;--m-accs:rgba(240,144,58,.14);--m-accs2:rgba(240,144,58,.24);--m-on:#1A1209;
  --m-pos:#6FB487;--m-poss:rgba(111,180,135,.14);--m-neg:#E07C6E;
  --m-geist:'Geist',system-ui,-apple-system,sans-serif;
  --m-cam:cubic-bezier(.65,0,.3,1);--m-out:cubic-bezier(.2,.8,.2,1);--m-spr:cubic-bezier(.3,1.25,.45,1)}
#ember .mi-film{position:absolute;inset:0;font-family:var(--m-geist);color:var(--m-tx);-webkit-font-smoothing:antialiased;
  background:radial-gradient(70cqw 56cqw at 50% 46%,#161513,#0a0a09 74%);box-shadow:inset 0 0 0 .12cqw #1f1e1b;border-radius:inherit}
#ember .mi-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
#ember .mi-n{font-variant-numeric:tabular-nums}
#ember .mi-dim{position:absolute;inset:0;background:#0a0a09;z-index:40;opacity:1;transition:opacity .9s ease;pointer-events:none;border-radius:inherit}
#ember .mi-dim.off{opacity:0}

/* stage: 100 × 80 em, centred; components live in its central area */
#ember .mi-stage{position:absolute;left:50%;top:50%;width:100em;height:80em;margin:-40em 0 0 -50em;font-size:1cqw}
@container (max-width:560px){#ember .mi-stage{font-size:1.1cqw}}

/* the one surface that morphs from component to component */
#ember .mi-shell{position:absolute;border-radius:2.6em;background:var(--m-sf);
  box-shadow:inset 0 0 0 .1em var(--m-ln2),0 .2em .6em rgba(0,0,0,.35),0 4em 8em -3em rgba(0,0,0,.8);
  opacity:0;transition:left 1.1s var(--m-cam),top 1.1s var(--m-cam),width 1.1s var(--m-cam),height 1.1s var(--m-cam),opacity .8s ease}
#ember .mi-shell.on{opacity:1}

/* panes: one per component, sized like the shell for that scene; the content cross-fades */
#ember .mi-pane{position:absolute;opacity:0;visibility:hidden;transform:translateY(1em);
  transition:opacity .3s ease,transform .5s var(--m-out),visibility 0s linear .3s}
#ember .mi-pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .55s,transform 1s var(--m-out) .5s,visibility 0s}
#ember .mi-pane.out{opacity:0;transform:translateY(-.6em)}
#ember .mi-pane .mi-a{position:absolute}
#ember .mi-slot{visibility:hidden!important}

/* shared elements (they travel between components) */
#ember .mi-sh{position:absolute;left:0;top:0;z-index:5;opacity:0;transition:transform 1.1s var(--m-cam),width 1.1s var(--m-cam),opacity .45s ease}
#ember .mi-sh.on{opacity:1}

/* type */
#ember .mi-lab{font-size:1.7em;color:var(--m-tx3);white-space:nowrap}
#ember .mi-ti{font-size:3.2em;font-weight:600;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
#ember .mi-nm{font-size:3.2em;font-weight:600;letter-spacing:-.025em;line-height:1.1;white-space:nowrap;color:var(--m-tx)}
#ember .mi-sub{font-size:1.8em;color:var(--m-tx2);white-space:nowrap}
#ember .mi-sub b{color:var(--m-tx);font-weight:500;font-variant-numeric:tabular-nums}
#ember .mi-xf{position:relative;display:block}
#ember .mi-xf>span{position:absolute;right:0;top:0;white-space:nowrap;display:flex;align-items:center;gap:.6em;transition:opacity .5s ease,transform .7s var(--m-out)}
#ember .mi-xf>span.b{opacity:0;transform:translateY(.4em)}
#ember .mi-xf.sw>span.a{opacity:0;transform:translateY(-.4em)}
#ember .mi-xf.sw>span.b{opacity:1;transform:none}
#ember .mi-dot{width:.55em;height:.55em;border-radius:50%;background:var(--m-acc);flex:none}
#ember .mi-dot.g{background:var(--m-pos)}
#ember .mi-dots{display:inline-flex;gap:.25em}
#ember .mi-dots i{width:.32em;height:.32em;border-radius:50%;background:currentColor;opacity:.3;animation:m-dot 1.1s ease-in-out infinite}
#ember .mi-dots i:nth-child(2){animation-delay:.18s}
#ember .mi-dots i:nth-child(3){animation-delay:.36s}
@keyframes m-dot{0%,100%{opacity:.3}40%{opacity:1}}
#ember .mi-av{width:4em;height:4em;border-radius:50%;display:grid;place-items:center;flex:none}
#ember .mi-av span{font-size:1.45em;font-weight:600}
#ember .mi-btn{display:inline-flex;align-items:center;gap:.8em;height:4.6em;padding:0 1.8em;border-radius:1.3em;background:var(--m-sf3);color:var(--m-tx);white-space:nowrap;
  transition:transform .22s var(--m-spr),background .4s ease,color .4s ease,opacity .4s ease}
#ember .mi-btn>span{font-size:1.75em;font-weight:500}
#ember .mi-btn .mi-ic{font-size:1.8em}
#ember .mi-btn.pri{background:var(--m-acc);color:var(--m-on)}
#ember .mi-btn.off{background:var(--m-sf3);color:var(--m-tx3)}
#ember .mi-btn.press{transform:scale(.94)}
#ember .mi-btn.ok{background:var(--m-poss);color:var(--m-pos)}
#ember .mi-tag{display:inline-flex;align-items:center;gap:.55em;height:2.9em;padding:0 1.1em;border-radius:2em;background:var(--m-sf3);color:var(--m-tx2);white-space:nowrap}
#ember .mi-tag>span{font-size:1.55em;font-weight:500}
#ember .mi-tag .mi-ic{font-size:1.6em}
#ember .mi-tag.hot{background:var(--m-accs);color:var(--m-acci)}
#ember .mi-tag.ok{background:var(--m-poss);color:var(--m-pos)}
#ember .mi-tag.mu{background:transparent;box-shadow:inset 0 0 0 .1em var(--m-ln2);color:var(--m-tx2)}

/* ---------- 1 · groups card ---------- */
#ember .mi-gr{position:relative;display:flex;align-items:center;gap:2.4em;height:8.6em;padding:0 2.2em;border-radius:1.6em;
  transition:opacity .7s ease,transform .9s var(--m-out),background .6s ease,box-shadow .6s ease}
#ember .mi-gr.pre{opacity:0;transform:translateY(1.6em)}
#ember .mi-gr.ln::before{content:"";position:absolute;left:2.2em;right:2.2em;top:0;border-top:.1em solid var(--m-ln)}
#ember .mi-gr.sel{background:var(--m-sf2);box-shadow:inset 0 0 0 .1em var(--m-accs2)}
#ember .mi-gr .c{font-size:3.4em;font-weight:600;letter-spacing:-.035em;width:2.1em;font-variant-numeric:tabular-nums;line-height:1}
#ember .mi-gr .t{flex:1;min-width:0;line-height:1.3}
#ember .mi-gr .t b{display:block;font-size:2.15em;font-weight:500;white-space:nowrap;letter-spacing:-.01em}
#ember .mi-gr .t span{display:block;font-size:1.7em;color:var(--m-tx3);white-space:nowrap;margin-top:.15em}
#ember .mi-gr .v{text-align:right;line-height:1.3;transition:opacity .6s ease}
#ember .mi-gr .v b{display:block;font-size:2.05em;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
#ember .mi-gr .v span{display:block;font-size:1.6em;color:var(--m-tx3);white-space:nowrap;margin-top:.15em}
#ember .mi-gr .v.pre{opacity:0}
#ember .mi-gr .ar{color:var(--m-tx3);font-size:1.8em;margin-left:-.6em}

/* ---------- 2 · composer ---------- */
#ember .mi-set{display:grid;grid-template-columns:.8fr 1.5fr 1fr;gap:2em}
#ember .mi-set div{line-height:1.3}
#ember .mi-set i{display:block;font-style:normal;font-size:1.6em;color:var(--m-tx3)}
#ember .mi-set b{display:block;font-size:2.05em;font-weight:500;margin-top:.25em;white-space:nowrap}
#ember .mi-set b.acc{color:var(--m-acci)}
#ember .mi-pvh{display:flex;align-items:baseline;justify-content:space-between;border-top:.1em solid var(--m-ln);padding-top:1.9em}
#ember .mi-pvh b{font-size:2em;font-weight:600}
#ember .mi-pvh span{font-size:1.6em;color:var(--m-tx3)}
#ember .mi-dr{display:grid;grid-template-columns:4em 1fr;gap:1.6em;padding:1.25em 1.8em;border-radius:1.7em;background:var(--m-sf2);
  transition:opacity .6s ease,transform .8s var(--m-out)}
#ember .mi-dr.pre{opacity:0;transform:translateY(1em)}
#ember .mi-dr .hd{display:flex;align-items:baseline;gap:1em;line-height:1.3}
#ember .mi-dr .hd b{font-size:1.85em;font-weight:600;white-space:nowrap}
#ember .mi-dr .hd>span{font-size:1.6em;color:var(--m-tx3);white-space:nowrap;flex:1;min-width:0}
#ember .mi-dr .hd>.st{margin-left:auto;position:relative;font-size:1em;height:2.4em;width:18em;flex:none}
#ember .mi-dr .st>span{font-size:1.55em}
#ember .mi-dr .st .a{color:var(--m-acci)}
#ember .mi-dr .st .b{color:var(--m-tx3)}
#ember .mi-dr .st .b .mi-ic{color:var(--m-pos);font-size:1.15em;stroke-width:2.2}
#ember .mi-dr .st .a.pre{opacity:0}
#ember .mi-dr p{font-size:1.9em;line-height:1.38;margin-top:.15em;color:var(--m-tx)}
#ember .mi-dr p span{opacity:0}

/* ---------- 3 · schedule ---------- */
#ember .mi-run{display:inline-flex;align-items:center;gap:.6em;height:3em;padding:0 1.2em;border-radius:2em;background:var(--m-poss);color:var(--m-pos)}
#ember .mi-run span{font-size:1.6em;font-weight:500}
#ember .mi-big{font-size:3.3em;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
#ember .mi-big span{color:var(--m-tx3);font-weight:500}
#ember .mi-days{display:flex;gap:.7em;align-items:center}
#ember .mi-days i{width:4.4em;height:3.6em;border-radius:1em;display:grid;place-items:center;font-style:normal;background:var(--m-sf3);color:var(--m-tx3);transition:background .4s,color .4s}
#ember .mi-days i span{font-size:1.55em;font-weight:500}
#ember .mi-days i.on{background:var(--m-accs);color:var(--m-acci)}
#ember .mi-days i.now{background:var(--m-acc);color:var(--m-on)}
#ember .mi-days .tm{display:inline-flex;align-items:center;gap:.6em;margin-left:1.2em;color:var(--m-tx2)}
#ember .mi-days .tm span{font-size:1.6em;white-space:nowrap}
#ember .mi-days .tm .mi-ic{font-size:1.7em}
#ember .mi-prh{display:flex;align-items:baseline;justify-content:space-between}
#ember .mi-prh b{font-size:2.2em;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
#ember .mi-prh span{font-size:1.65em;color:var(--m-tx2);white-space:nowrap;font-variant-numeric:tabular-nums}
#ember .mi-bar{height:.8em;border-radius:.8em;background:var(--m-sf3);overflow:hidden;position:relative}
#ember .mi-bar i{position:absolute;inset:0;border-radius:.8em;background:var(--m-acc);transform-origin:0 50%;transform:scaleX(0)}
#ember .mi-bar u{position:absolute;top:0;bottom:0;width:.2em;background:var(--m-sf);text-decoration:none}
#ember .mi-ft{display:flex;justify-content:space-between;align-items:center;color:var(--m-tx3)}
#ember .mi-ft>span{display:flex;align-items:center;gap:.6em}
#ember .mi-ft>span span{font-size:1.55em;white-space:nowrap}
#ember .mi-ft .mi-ic{font-size:1.6em}

/* ---------- 4 · replies ---------- */
#ember .mi-rp{transition:opacity .6s ease,transform .8s var(--m-out)}
#ember .mi-rp.pre{opacity:0;transform:translateY(1.2em)}
#ember .mi-rp.ln{border-top:.1em solid var(--m-ln);padding-top:2.2em}
#ember .mi-rh{display:flex;align-items:center;gap:1.4em}
#ember .mi-rh .mi-av{width:3.8em;height:3.8em}
#ember .mi-rh .who{flex:1;min-width:0;line-height:1.3}
#ember .mi-rh .who b{display:block;font-size:1.95em;font-weight:600;white-space:nowrap}
#ember .mi-rh .who span{display:block;font-size:1.55em;color:var(--m-tx3);white-space:nowrap}
#ember .mi-rh .tg{position:relative;display:flex;align-items:center;gap:.8em}
#ember .mi-rh .tg .mi-xf{height:2.9em}
#ember .mi-msg{display:inline-block;margin:1.2em 0 0 5.2em;padding:1.1em 1.6em;border-radius:1.6em 1.6em 1.6em .5em;background:var(--m-sf3);transition:opacity .6s ease}
#ember .mi-msg span{font-size:2.05em;white-space:nowrap}
#ember .mi-rp.dim .mi-msg,#ember .mi-rp.dim .who{opacity:.42;transition:opacity .8s ease}
#ember .mi-auto{margin:1em 0 0 5.2em;display:flex;align-items:center;gap:.8em;color:var(--m-tx2);min-height:2.6em}
#ember .mi-auto .mi-ic{font-size:1.7em;color:var(--m-acci);flex:none}
#ember .mi-auto p{font-size:1.75em;white-space:nowrap}
#ember .mi-auto p span{opacity:0}
#ember .mi-auto.fx{opacity:0;transform:translateY(.6em);transition:opacity .6s ease,transform .8s var(--m-out)}
#ember .mi-auto.fx.on{opacity:1;transform:none}
#ember .mi-sg{margin:1.4em 0 0 5.2em;padding:1.8em 2em;border-radius:1.8em;background:var(--m-sf2);box-shadow:inset 0 0 0 .1em var(--m-ln2)}
#ember .mi-sg .l{display:flex;align-items:center;gap:.6em;color:var(--m-acci)}
#ember .mi-sg .l span{font-size:1.6em;font-weight:500}
#ember .mi-sg .l .mi-ic{font-size:1.6em}
#ember .mi-sg p{font-size:2em;line-height:1.42;margin-top:.5em;min-height:2.84em}
#ember .mi-sg p span{opacity:0}
#ember .mi-sg .bt{display:flex;gap:1em;margin-top:1.6em}
#ember .mi-chip{display:inline-flex;align-items:center;height:2.9em;padding:0 1.1em;border-radius:2em;background:var(--m-poss);color:var(--m-pos);white-space:nowrap}
#ember .mi-chip span{font-size:1.6em;font-weight:600;font-variant-numeric:tabular-nums}
#ember #mAmt{transition:transform 1.25s var(--m-cam),opacity .45s ease}
#ember #mAmt .mi-chip{transform:scale(.6);transition:transform .6s var(--m-spr)}
#ember #mAmt.on .mi-chip{transform:none}

/* ---------- 5 · numbers ---------- */
#ember .mi-seg{display:flex;gap:.2em;padding:.3em;border-radius:1.2em;background:var(--m-sf2)}
#ember .mi-seg i{font-style:normal;height:3.2em;padding:0 1.2em;border-radius:.9em;display:grid;place-items:center;color:var(--m-tx2)}
#ember .mi-seg i span{font-size:1.5em;white-space:nowrap}
#ember .mi-seg i.on{background:var(--m-sf3);color:var(--m-tx)}
#ember .mi-hero{font-size:8.4em;font-weight:600;letter-spacing:-.055em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
#ember .mi-hero s{text-decoration:none;color:var(--m-tx3);font-size:.42em;letter-spacing:-.02em;font-weight:500;margin-left:.06em}
#ember .mi-hero i{font-style:normal;margin-right:.08em}
#ember .mi-dl{display:flex;align-items:center;gap:1em;color:var(--m-tx2)}
#ember .mi-dl>span{font-size:1.75em;white-space:nowrap;transition:opacity .7s ease}
#ember .mi-dl>span.pre{opacity:0}
#ember .mi-dl>span.mi-chip{font-size:1em}
#ember .mi-stats{display:grid;grid-template-columns:1fr 1fr 1.25fr;border-top:.1em solid var(--m-ln)}
#ember .mi-stats>div{padding:2em 0 0;line-height:1.2}
#ember .mi-stats>div+div{padding-left:2.4em;border-left:.1em solid var(--m-ln)}
#ember .mi-stats i{display:block;font-style:normal;font-size:1.6em;color:var(--m-tx3);white-space:nowrap}
#ember .mi-stats b{display:block;font-size:3.8em;font-weight:600;letter-spacing:-.035em;margin-top:.2em;font-variant-numeric:tabular-nums;white-space:nowrap}
#ember .mi-stats b small{font-size:.5em;color:var(--m-tx3);font-weight:500;letter-spacing:-.01em}
#ember .mi-stats .mi-bar{margin-top:1.2em;height:.6em}
#ember .mi-chart{display:block;width:100%;height:100%;overflow:visible}
#ember .mi-chart .ln{fill:none;stroke:var(--m-acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
#ember .mi-chart .ar{fill:url(#mGrad);opacity:0;transition:opacity 1s ease .9s}
#ember .mi-chart .dt{fill:var(--m-acc);opacity:0;transition:opacity .5s ease 1.4s}
#ember .mi-chart.on .ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1)}
#ember .mi-chart.on .ar,#ember .mi-chart.on .dt{opacity:1}
#ember .mi-mo{display:flex;justify-content:space-between;color:var(--m-tx3);margin-top:.8em}
#ember .mi-mo span{font-size:1.4em}

/* cursor */
#ember .mi-cur{position:absolute;left:0;top:0;z-index:30;width:2.6em;height:2.6em;opacity:0;pointer-events:none;transform-origin:0 0}
#ember .mi-cur svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .15em .3em rgba(0,0,0,.5))}