/* ---------- the live panel (mirrors the real 4.0 app) ----------------------
   REDESIGN 2026-08-04: the demo no longer lives in a fake MacBook screen in
   the hero. The notch is IN THE HEADER now, at real proportions, and the
   panel drops out of it over the page; #panelRoom (suite.css) grows so the
   page yields instead of being covered. The old .screen/.menubar/.wing stage
   is gone; pages that carried it were converted with this file.

   The page tokens are light clay since the redesign, so the app's own dark
   values are SCOPED here: inside the notch the page becomes the app, amber
   and all, because the app is the app. Every label below the notch is a
   string the Swift ships. */

#notchStage{position:relative;z-index:6;
  --panel:#111113; --inset:#0d0e10;
  --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.06); --hair3:rgba(255,255,255,.17);
  --fill:rgba(255,255,255,.06); --fill2:rgba(255,255,255,.11);
  --t1:rgba(245,245,244,.96); --t2:rgba(245,245,244,.6); --t3:rgba(245,245,244,.38);
  --amber:#ffb000; --amber-ink:#171410;
  --green:#35c06a; --red:#e5493d; --sage:#6fb6a3; --cob:#6fa0e8; --rec:#d96a5e;
  color-scheme:dark;
}
/* the hint under the notch, in the PAGE's ink (it is the site speaking) */
#notchStage .notchhint{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:12px;color:rgba(24,20,16,.58);
  transition:opacity .25s;pointer-events:none}
#notchStage.open .notchhint{opacity:0}
@media(max-width:900px){#notchStage .notchhint{display:none}}

#notchStage .dot{width:6px;height:6px;border-radius:50%;flex:none}
#notchStage .dot.g{background:var(--green)} #notchStage .dot.r{background:var(--red)} #notchStage .dot.a{background:var(--amber)}
#notchStage .dot.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){#notchStage .dot.pulse{animation:none}}
#notchStage .eq{display:flex;align-items:flex-end;gap:1.5px;height:10px}
#notchStage .eq i{width:2px;background:rgba(245,245,244,.6);border-radius:1px;height:3px;transition:height .3s ease}

/* The open is a clip reveal, not a height animation: the panel unrolls out of
   the notch on the compositor, and the content settles down into place a beat
   behind the surface. The old site animated raw height from zero, which is
   exactly the jank this replaces; height still transitions, but only between
   modes, where the change is small. Anchored absolute to the stage (the
   header's centre column), so no engine's flow rules can detach the panel
   from the notch: it provably comes OUT of it. */
#notchStage .panel{width:min(660px,94vw);background:var(--panel);
  border:1px solid var(--hair);border-top:0;border-radius:0 0 20px 20px;
  box-shadow:0 26px 60px -18px rgba(11,9,8,.5);z-index:4;
  position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);
  overflow:hidden;opacity:0;visibility:hidden;
  clip-path:inset(0 0 100% 0 round 0 0 20px 20px);
  transition:clip-path .4s cubic-bezier(.55,.06,.35,1),
    height .32s cubic-bezier(.3,.85,.25,1),
    opacity .22s ease .12s,visibility 0s linear .4s}
#notchStage.open .panel{opacity:1;visibility:visible;
  clip-path:inset(0 0 0 0 round 0 0 20px 20px);
  transition:clip-path .55s cubic-bezier(.2,.9,.22,1),
    height .32s cubic-bezier(.3,.85,.25,1),opacity .15s ease}
#notchStage .phead,#notchStage .dcontent{
  transition:transform .55s cubic-bezier(.2,.9,.22,1),opacity .3s ease}
#notchStage:not(.open) .phead,#notchStage:not(.open) .dcontent{
  transform:translateY(-12px);opacity:0;transition:transform .3s ease-in,opacity .2s ease}
@media(prefers-reduced-motion:reduce){
  #notchStage .panel,#notchStage .phead,#notchStage .dcontent{transition:none}
}
@media(max-width:900px){
  /* Off the desktop grid the panel pins to the viewport top, centred. */
  #notchStage .panel{position:fixed;top:0;left:50%}
}

#notchStage .phead{height:58px;display:flex;align-items:flex-end;gap:12px;
  padding:0 14px 8px;border-bottom:1px solid var(--hair2)}
#notchStage .seg{display:flex;background:var(--hair2);border-radius:8px;padding:2px}
#notchStage .seg button{font:inherit;border:0;background:none;cursor:pointer;
  padding:4px 10px;border-radius:6px;font-size:10.5px;color:var(--t2);
  display:flex;align-items:center;gap:5px;transition:background .14s,color .14s}
#notchStage .seg button:hover{color:var(--t1)}
#notchStage .seg button.on{background:var(--fill2);color:var(--t1)}
#notchStage .seg button .adot{width:4.5px;height:4.5px;border-radius:50%;background:var(--amber);display:none}
#notchStage .seg button.engaged .adot{display:block}
#notchStage .autonote{font-size:10px;color:var(--t3)}
#notchStage .phead .sp{flex:1}
#notchStage .hclock{font-size:10.5px;color:var(--t3)}
#notchStage .quiet{font:inherit;border:0;background:none;cursor:pointer;font-size:10px;color:var(--t2);
  padding:5px 9px;border-radius:6px;transition:background .12s,color .12s}
#notchStage .quiet:hover{background:var(--fill);color:var(--t1)}
@media(max-width:620px){
  /* The row is wider than the phone; the panel clips, so it must scroll here
     or its right-hand controls are unreachable rather than merely tight. */
  #notchStage .phead{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:9px}
  #notchStage .phead::-webkit-scrollbar{display:none}
  #notchStage .phead > *{flex:none}
  #notchStage .phead .sp{flex:1 0 8px}
  #notchStage .phead .seg button{padding:8px 12px;font-size:11px}
  #notchStage .phead .quiet{padding:8px 10px}
  #notchStage .phead .spark{width:34px;height:34px}
}
#notchStage .dcontent{position:relative;height:calc(100% - 58px)}
#notchStage .view{position:absolute;inset:0;padding:16px 18px;opacity:0;pointer-events:none;
  transform:translateX(8px);transition:opacity .18s ease,transform .22s var(--spring);text-align:left}
#notchStage .view.on{opacity:1;pointer-events:auto;transform:none}
#notchStage .dlbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);
  display:flex;align-items:center;gap:6px}
#notchStage .dhair{height:1px;background:var(--hair2);border:0}
#notchStage .vdiv{width:1px;background:var(--hair2);align-self:stretch;margin:2px 0}
#notchStage .dbtn{font:inherit;border:0;cursor:pointer;font-size:10.5px;font-weight:600;border-radius:6px;
  padding:5px 11px;background:var(--amber);color:var(--amber-ink)}
#notchStage .gbtn{font:inherit;border:0;cursor:pointer;font-size:10px;font-weight:500;border-radius:6px;
  padding:5px 10px;background:var(--fill);color:var(--t2)}
#notchStage .gbtn:hover{background:var(--fill2);color:var(--t1)}
#notchStage .dsw{position:relative;width:32px;height:19px;border-radius:10px;background:rgba(255,255,255,.12);
  border:0;cursor:pointer;transition:background .16s;flex:none;padding:0}
#notchStage .dsw i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#f5f5f4;transition:left .16s var(--spring)}
#notchStage .dsw.on{background:var(--amber)}
#notchStage .dsw.on i{left:15px}
#notchStage .dbar{position:relative;height:3.5px;border-radius:2px;background:rgba(255,255,255,.09)}
#notchStage .dbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--amber)}
#notchStage .dbar .knob{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#f5f5f4;
  transform:translate(-50%,-50%)}
#notchStage .dbar.plain .fill{background:rgba(245,245,244,.5)}
#notchStage .drow{display:flex;align-items:center;gap:9px}
#notchStage .drow .tt{font-size:9.5px;color:var(--t3);width:40px;flex:none}
#notchStage .drow .et{font-size:11.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notchStage .tbtn{width:28px;height:28px;border:0;border-radius:7px;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
#notchStage .tbtn:hover{background:var(--fill)}
#notchStage .tbtn svg{width:12px;height:12px;fill:rgba(245,245,244,.85)}
#notchStage .tbtn.prom{background:rgba(255,255,255,.12);border-radius:50%;width:30px;height:30px}
/* Claude co-pilot (the spark) */
#notchStage .spark{width:26px;height:26px;border:0;border-radius:7px;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s;flex:none}
#notchStage .spark:hover{background:var(--fill)}
#notchStage .spark svg{width:14px;height:14px;fill:none;stroke:var(--amber);stroke-width:1.7}
#notchStage .spark.on{background:rgba(255,176,0,.14)}
#notchStage .cchip{font:inherit;border:0;font-size:10.5px;font-weight:500;color:var(--t2);padding:4px 11px;
  border-radius:6px;background:var(--fill);cursor:pointer;transition:background .12s,color .12s}
#notchStage .cchip.on{background:var(--fill2);color:var(--t1);font-weight:600}
#notchStage .cq{font-size:12px;color:var(--t1);line-height:1.5}
#notchStage .cans{font-size:12px;color:var(--t1);line-height:1.55;margin-top:6px}
#notchStage .plan{display:flex;flex-direction:column;gap:6px;margin-top:8px}
#notchStage .prow{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;background:var(--fill)}
#notchStage .pchk{width:15px;height:15px;border-radius:4px;background:var(--amber);flex:none;
  display:flex;align-items:center;justify-content:center}
#notchStage .pchk svg{width:9px;height:9px;fill:none;stroke:var(--amber-ink);stroke-width:3}
#notchStage .pico{width:14px;height:14px;flex:none;stroke:var(--t3);fill:none;stroke-width:1.7}
#notchStage .pttl{font-size:11.5px;color:var(--t1)}
#notchStage .pmeta{font-size:9.5px}
/* ---- the suite transport, INSIDE the one real panel ----------------------
   Every string these rows show is the string the Swift ships. See
   Sources/Crest/UI/MinutesRecView.swift ("Record this meeting", "Record now",
   "Saved to Minutes") and TakeRecView.swift ("Take isn't rolling.", the
   Mark / Pause / Cut transport and its shortcuts). */
#notchStage .srows{margin-top:15px;padding:2px 0 26px;border-top:1px solid var(--hair2);position:relative}
#notchStage .srow{display:flex;align-items:center;gap:11px;padding:9px 2px}
#notchStage .srow + .srow{border-top:1px solid var(--hair2)}
#notchStage .sglyph{width:28px;height:28px;border-radius:8px;border:1px solid var(--hair);
  background:var(--inset);display:grid;place-items:center;flex:none}
#notchStage .sglyph svg{width:14px;height:14px;fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;display:block}
#notchStage .sglyph.min svg{stroke:var(--sage)}
#notchStage .sglyph.take svg{stroke:var(--cob)}
#notchStage .smeta{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
#notchStage .sname{font-size:11.5px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notchStage .ssub{font-size:9.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notchStage .sside{display:flex;align-items:center;gap:7px;flex:none}
#notchStage .stimer{font-family:var(--mono);font-size:12.5px;color:var(--t1);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
#notchStage .stimer::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rec);
  flex:none;animation:pulse 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#notchStage .stimer::before{animation:none}}
#notchStage .srec{font:inherit;border:0;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;border-radius:7px;padding:6px 12px;
  background:var(--fill);color:var(--t1);transition:background .14s}
#notchStage .srec:hover{background:var(--fill2)}
#notchStage .srec .rdot{width:7px;height:7px;border-radius:50%;background:var(--rec);flex:none}
#notchStage .schip{font:inherit;border:1px solid var(--hair);cursor:pointer;font-size:10px;font-weight:600;
  border-radius:7px;padding:5px 10px;background:transparent;color:var(--t2);
  transition:border-color .14s,color .14s}
#notchStage .schip:hover{border-color:var(--hair3);color:var(--t1)}
#notchStage .schip.key{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
#notchStage .schip.cut{color:var(--amber);border-color:rgba(255,176,0,.34)}
#notchStage .schip.cut:hover{border-color:rgba(255,176,0,.6);color:var(--amber)}
#notchStage .sdone{font-size:10.5px;font-weight:600;color:var(--sage)}
/* NB: `.stimer` and `.srec` set display:flex, which beats the browser's own
   [hidden]{display:none}. The fix is one line in /suite.css
   ([hidden]{display:none!important}). Do not re-add a local copy here. */
/* The panel's own toast, in the padding the rows reserve for it, so it can
   never land on top of a control or get clipped by the panel's overflow. */
#notchStage .ptoast{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(5px);
  font-size:10px;color:var(--t2);background:#17181c;border:1px solid var(--hair);
  border-radius:999px;padding:4px 11px;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--spring);z-index:8}
#notchStage .ptoast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#notchStage .ptoast b{color:var(--t1);font-weight:600}
@media(max-width:620px){
  #notchStage .ssub{display:none}
  #notchStage .srow{gap:9px}
}