/* Lock Screen / Live Activity components, shared by index.html (beat 6) and how-it-works.html.
   Version 2.1 visuals only; they sit inside the @@RELEASE-2.1 markers on each page. */
/* ---------- ALWAYS THERE — one iPhone Lock Screen ----------
   Version 2.1: ONE phone, with THE ONE DONNA CARD (.la) and the compact Dynamic
   Island (.di). It is the beat's only visual: the card's other states (a job
   still working, on a call) are classes on this same markup, never separate
   drawings. Every size is the source's point value times --u, so the card keeps
   iOS proportions at any width. iOS chrome uses the system font. The screen is
   shorter than a real one: the empty wallpaper between clock and card is cut. */
.ls{--ios:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
  --iosmono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --la-violet:#9D8CFF;--la-amber:#F2B445;--la-sage:#8CC9A0;--la-red:#FF5A4F;--la-green:#3CCF73;
  --wall:radial-gradient(130% 70% at 50% 0,#252231 0,#0e0d14 52%,#050506 100%)}
.ls-tag{display:inline-block;align-self:flex-start;margin-top:14px;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--sage);border:1px solid var(--line-2);border-radius:999px;padding:6px 10px}

.ls-fig{min-width:0}
.ls-cap{max-width:300px;margin:12px auto 0;font:400 12px/1.5 var(--sans);color:var(--muted);text-align:center;text-wrap:pretty}

/* the phone: the whole device, 390 points wide */
.ls{container-type:inline-size;width:100%;max-width:300px;margin-inline:auto;padding:7px;
  border:1px solid var(--hair-2);border-radius:clamp(34px,10.8vw,42px);background:#17161a}
.ls__screen{--u:.733px;--u:calc(100cqw / 390);position:relative;display:flex;flex-direction:column;align-items:center;
  min-height:calc(610 * var(--u));border-radius:calc(47 * var(--u));background:var(--wall);
  padding:calc(11 * var(--u)) calc(9 * var(--u)) calc(8 * var(--u));font-family:var(--ios);color:#fff;overflow:hidden}
.ls__screen::after{content:"";flex:0 0 auto;width:calc(134 * var(--u));height:calc(5 * var(--u));border-radius:99px;background:rgba(255,255,255,.82)}
.ls__date{margin-top:calc(34 * var(--u));font:600 calc(20 * var(--u))/1.2 var(--ios);color:rgba(255,255,255,.78)}
.ls__clock{font:600 calc(94 * var(--u))/1 var(--ios);letter-spacing:calc(-2.5 * var(--u));color:rgba(255,255,255,.94);
  font-variant-numeric:tabular-nums;margin-bottom:calc(22 * var(--u))}
/* the two Lock Screen buttons, then the home indicator */
.ls__foot{display:flex;justify-content:space-between;width:100%;padding:calc(20 * var(--u)) calc(37 * var(--u)) calc(14 * var(--u))}
.ls__foot span{display:grid;place-items:center;width:calc(50 * var(--u));height:calc(50 * var(--u));border-radius:50%;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.92)}
.ls__foot svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}

/* Donna's orb: a violet sphere lit from the top-left (DonnaCardOrb) */
.orb{--s:28;flex:0 0 auto;width:calc(var(--s) * var(--u));height:calc(var(--s) * var(--u));border-radius:50%;
  background:radial-gradient(circle calc(var(--s) * .72 * var(--u)) at 32% 28%,#D9D1FF,#9D8CFF 50%,#4B3DB0);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)}

/* the stage dot (DonnaCardDot): ring = back, solid violet = working, amber = your move */
.ld{--s:8;flex:0 0 auto;box-sizing:border-box;width:calc(var(--s) * var(--u));height:calc(var(--s) * var(--u));
  margin:calc(1.5 * var(--u));border-radius:50%}
.ld--back{border:calc(2 * var(--u)) solid var(--la-sage)}
.ld--work{background:var(--la-violet)}
.ld--move{background:var(--la-amber)}

/* the compact Dynamic Island: orb + one dot per job; on a call, the level + the timer */
.di{display:flex;align-items:center;justify-content:space-between;width:calc(228 * var(--u));height:calc(37 * var(--u));
  padding:0 calc(13 * var(--u));border-radius:calc(19 * var(--u));background:#000}
.di .orb{--s:16}
.di .ld{--s:7;margin:0}
.di .ld.run{border:0;background:var(--la-violet)}
.di__l,.di__r,.di__dots{display:flex;align-items:center}
.di__dots{gap:calc(3 * var(--u))}
.di__eq{display:none;align-items:center;gap:calc(2 * var(--u));height:calc(14 * var(--u))}
.di__eq i{width:calc(2.5 * var(--u));border-radius:99px;background:var(--la-violet);height:calc(6 * var(--u))}
.di__eq i:nth-child(2){height:calc(12 * var(--u))}
.di__eq i:nth-child(3){height:calc(8 * var(--u))}
.di__t{display:none;font:500 calc(13 * var(--u))/1 var(--iosmono);color:var(--la-violet)}

/* THE CARD (DonnaCardLockScreen): padding 14 x 12, header, then up to three rows.
   Like any Live Activity it sits at the foot of the Lock Screen, above the buttons. */
.la{margin-top:auto;display:flex;flex-direction:column;gap:calc(10 * var(--u));width:100%;padding:calc(12 * var(--u)) calc(14 * var(--u));
  border-radius:calc(26 * var(--u));background:rgba(22,21,28,.86);font-family:var(--ios);color:#fff;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.la__head{display:flex;align-items:center;gap:calc(10 * var(--u))}
.la__id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(2 * var(--u))}
.la__nl{display:flex;align-items:center;gap:calc(7 * var(--u))}
.la__name{font:600 calc(15 * var(--u))/1.2 var(--ios);color:#fff}
.la__timer{display:none;width:calc(48 * var(--u));font:500 calc(12 * var(--u))/1 var(--iosmono);color:rgba(255,255,255,.62)}
.la__meter{display:none;align-items:flex-end;gap:calc(1.5 * var(--u));height:calc(11 * var(--u))}
.la__meter i{width:calc(2.5 * var(--u));border-radius:99px;background:rgba(255,255,255,.2);height:calc(3.96 * var(--u))}
.la__meter i:nth-child(1),.la__meter i:nth-child(2),.la__meter i:nth-child(3){background:#fff}
.la__meter i:nth-child(2){height:calc(5.72 * var(--u))}
.la__meter i:nth-child(3){height:calc(7.48 * var(--u))}
.la__meter i:nth-child(4){height:calc(9.24 * var(--u))}
.la__meter i:nth-child(5){height:calc(11 * var(--u))}
.la__sub{font:400 calc(12.5 * var(--u))/1.2 var(--ios);color:rgba(255,255,255,.62);white-space:nowrap}
.la__talk{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:calc(5 * var(--u));height:calc(32 * var(--u));
  padding:0 calc(13.5 * var(--u));border-radius:99px;background:var(--la-green);color:#fff;
  font:600 calc(14 * var(--u))/1 var(--ios)}
.la__talk svg{width:calc(13.5 * var(--u));height:calc(13.5 * var(--u))}
.la__ctl{display:none;flex:0 0 auto;gap:calc(8 * var(--u))}
.la__c{position:relative;display:grid;place-items:center;width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff}
.la__c svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.la__c--end{background:var(--la-red)}
.la__c--end svg{width:calc(21 * var(--u));height:calc(21 * var(--u))}
.la__rows{display:flex;flex-direction:column;gap:calc(5 * var(--u))}
.la__row{display:flex;align-items:center;gap:calc(8 * var(--u));min-height:calc(22 * var(--u))}
.la__t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:500 calc(13.5 * var(--u))/1.3 var(--ios);color:#fff}
.la__rc{flex:0 0 auto;font:600 calc(10.5 * var(--u))/1 var(--iosmono);color:rgba(255,255,255,.42);white-space:nowrap}
.la__rc b{font-weight:600;color:rgba(255,255,255,.62)}
.la__rc--back{color:var(--la-sage)}
.la__rc--run,.la__q{display:none}
.la__q{flex:0 0 auto;font:600 calc(10.5 * var(--u))/1 var(--iosmono);letter-spacing:calc(.8 * var(--u));text-transform:uppercase;color:var(--la-sage)}
.la__q--then{color:rgba(255,255,255,.42)}
.la__hear{flex:0 0 auto;display:flex;align-items:center;gap:calc(5 * var(--u));height:calc(22 * var(--u));padding:0 calc(9 * var(--u));
  border-radius:99px;background:var(--la-sage);color:#000;
  font:700 calc(10.5 * var(--u))/1 var(--iosmono);letter-spacing:calc(.6 * var(--u))}
.la__hear i{width:0;height:0;border-style:solid;border-color:transparent transparent transparent #000;
  border-width:calc(3.6 * var(--u)) 0 calc(3.6 * var(--u)) calc(6 * var(--u))}
.la__hear--move{background:var(--la-amber)}

/* a row still working: the violet dot and the receipt, no HEAR (story.js sets .run, then lifts it) */
.la__row.run .ld{border:0;background:var(--la-violet)}
.la__row.run .la__rc--back,.la__row.run .la__hear{display:none}
.la__row.run .la__rc--run{display:block}
/* on a call: the timer and level join the name, the three controls replace Talk,
   the island shows the level and the timer, HEAR gives way to the queue word
   (DECIDE stays: a job that needs you is still a tap away) */
.is-live .la__timer{display:block}
.is-live .la__meter,.is-live .la__ctl,.is-live .di__eq{display:flex}
.is-live .la__talk,.is-live .la__hear:not(.la__hear--move),.is-live .la__rc--back,.is-live .di .orb,.is-live .di__dots{display:none}
.is-live .la__q,.is-live .di__t{display:block}