/* apps-sv.css — the super view (prefix ap-): the plum sheet's head and the two tabs, the workspace window (a browser bar,
   a rail of rooms, the screen), Brain Club's layer (done items, the gold card that waits for a yes, state chips, the
   assistant's note, the proof panel) and the generic screen. The eight drawn screens are apps-sv2.css and apps-sv3.css. */
.ap-svs .ap-sv-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(30px,4vw,48px)}
.ap-svs .k-sechead{margin-bottom:0}
.ap-svs .k-h2{color:var(--cream-50)}
.ap-tog{flex:none}
.ap-tog .k-tab{height:48px;padding:0 22px}
.ap-tog .k-tab img{width:22px;height:auto;margin-inline-start:-6px;filter:drop-shadow(0 2px 2px rgba(60,6,30,.3))}

/* the window */
.ap-sv{--ink:#2a0a1c;--ink-2:#5b2a44;--ink-3:#7a4a62;--line:rgba(100,8,46,.1);position:relative;border-radius:32px;background:linear-gradient(180deg,#fffaf0,#fff2d6);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 0 rgba(250,201,63,0),0 70px 100px -50px rgba(0,0,0,.75),0 20px 34px -14px rgba(20,0,10,.5);transition:box-shadow .6s var(--ease)}
.ap-sv[data-layer="club"]{box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(250,201,63,.9),0 0 70px -8px rgba(250,201,63,.5),0 70px 100px -50px rgba(0,0,0,.75),0 20px 34px -14px rgba(20,0,10,.5)}
.ap-sv :focus-visible{outline-color:var(--plum-400)}
.ap-sv-top{display:flex;align-items:center;gap:12px;height:62px;padding-block:0; padding-inline:22px 14px;border-radius:32px 32px 0 0;background:linear-gradient(180deg,#fff6e0,#fdebc4);box-shadow:inset 0 -1px 0 rgba(100,8,46,.08)}
.ap-sv-dots{display:flex;gap:7px;flex:none}
.ap-sv-dots i{width:12px;height:12px;border-radius:50%;background:#f3c7a0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.ap-sv-dots i:nth-child(2){background:#f7d977}.ap-sv-dots i:nth-child(3){background:#b9dba0}
.ap-sv-url{min-width:0;margin-inline-start:10px;padding:9px 18px;border-radius:999px;background:rgba(100,8,46,.07);font:600 .8125rem/1 var(--text);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-sv-ex{flex:none}
.ap-sv-br{display:none!important}
.ap-sv-st{display:inline-flex;align-items:center;gap:8px;flex:none;margin-inline-start:auto;padding-block:5px; padding-inline:5px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 1px 0 #fff,0 8px 16px -10px rgba(90,40,0,.45);font:700 .8125rem/1 var(--display);color:var(--plum-600);white-space:nowrap}
.ap-sv-st .ap-bdg{width:26px;height:auto}
.ap-sv-n{font:600 .8125rem/1 var(--text);color:var(--ink-3)}
.ap-sv-n::before{content:"·";margin-block:0; margin-inline:2px 6px;color:var(--ink-3)}
.ap-sv[data-layer="app"] .ap-sv-ex{margin-inline-start:auto}
.ap-proof-btn{display:inline-flex;align-items:center;gap:8px;flex:none;height:42px;padding-block:0; padding-inline:14px 18px;border-radius:999px;background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow);font:650 .9rem/1 var(--display);color:var(--plum-700);transition:transform .25s var(--spring),filter .2s}
.ap-proof-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.ap-proof-btn[aria-expanded="true"]{background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow);color:var(--cream-50)}
.ap-proof-btn .pb-i{width:18px;height:18px}
.ap-sv-main{display:grid;grid-template-columns:84px minmax(0,1fr);border-radius:0 0 32px 32px;overflow:hidden}
.ap-sv-rail{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0;background:rgba(100,8,46,.045);box-shadow:inset -1px 0 0 rgba(100,8,46,.06)}
.ap-sv-ri{display:block;border-radius:23%;-webkit-tap-highlight-color:transparent}
.ap-sv-ri img{width:50px;height:50px;border-radius:23%;box-shadow:0 8px 12px -7px rgba(90,40,0,.5);opacity:.78;transition:opacity .2s,transform .35s var(--spring)}
.ap-sv-ri:hover img{opacity:1;transform:translateY(-2px) scale(1.05)}
.ap-sv-ri[aria-current] img{opacity:1;box-shadow:0 0 0 3px rgba(250,201,63,.95),0 10px 16px -6px rgba(90,40,0,.5)}
.ap-sv-scr{min-width:0;padding:24px clamp(18px,2.4vw,30px) 30px}
.ap-sv-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:20px}
.ap-sv-hd h3{font:800 clamp(1.4rem,2vw,1.75rem)/1 var(--display);letter-spacing:-.025em;color:var(--plum-600)}
.ap-sv-day{font:600 .8125rem/1 var(--text);color:var(--ink-3)}
.ap-sv-body{position:relative}

/* the layers: .ap-ov only with Brain Club, .ap-ap only in the plain app; Brain Club's layer arrives in a little wave */
.ap-sv[data-layer="app"] .ap-ov{display:none!important}
.ap-sv[data-layer="club"] .ap-ap{display:none!important}
.ap-sv.ap-pre .ap-ov{opacity:0}
.ap-reveal .ap-sv-body .ap-ov{animation:ap-in .65s var(--spring) both;animation-delay:calc(var(--k,0) * 85ms + 80ms)}
@keyframes ap-in{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}

/* Brain Club's pieces: the green tick, a done item, a face */
.ap-tick{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;background:#2f9a62;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 3px 6px -2px rgba(20,90,50,.5)}
.ap-fc{width:24px;height:24px;flex:none;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 8px -3px rgba(90,40,0,.5);background:var(--cream-200)}
.ap-fc--star{border:0;box-shadow:none;background:none;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(120,60,0,.4))}
.ap-done{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding-block:5px; padding-inline:5px 12px;border-radius:16px;background:var(--gold-50);box-shadow:inset 0 0 0 1.5px rgba(242,182,41,.42);font:500 .8125rem/1.3 var(--text);color:var(--ink-2)}
.ap-done-at{font:700 .8125rem/1 var(--display);color:var(--plum-500);font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-done-x{min-width:0}
.ap-done-x b{font-weight:700;color:var(--plum-600)}
.ap-dones{display:grid;gap:8px}
.ap-dones>li{display:flex;min-width:0}

/* a chip: a class or a state, in the brand's tones */
.ap-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font:650 .75rem/1 var(--text);white-space:nowrap;color:var(--ink-2);background:var(--cream-200);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.ap-chip[data-k="money"],.ap-chip[data-k="due"]{color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.ap-chip[data-k="deadline"],.ap-chip[data-k="late"],.ap-chip[data-k="old"]{color:#a2391d;background:#fbe0d6}
.ap-chip[data-k="person"]{color:var(--plum-600);background:var(--plum-50);box-shadow:inset 0 0 0 1px rgba(100,8,46,.14)}
.ap-chip[data-k="notice"]{color:var(--ink-2);background:var(--cream-200)}
.ap-chip[data-k="noise"]{color:var(--ink-3);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(100,8,46,.18)}
.ap-chip[data-k="paid"],.ap-chip[data-k="ok"],.ap-chip[data-k="done"]{color:#24603d;background:#e1f1d6}
.ap-chip[data-k="wait"]{color:var(--cream-50);background:var(--k-plum-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ap-chip[data-k="draft"],.ap-chip[data-k="next"]{color:var(--ink-3);background:rgba(100,8,46,.06)}
.ap-chip.ap-isyes,.ap-chip:has(.ap-isyes){color:#24603d;background:#e1f1d6;box-shadow:none}
.ap-isyes{animation:k-pop .5s var(--spring) both}

/* the card that waits for a yes: gold clay, a plum button that answers */
.ap-wait{position:relative;margin-top:16px;padding:16px 18px 18px;border-radius:24px;background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow);color:var(--plum-700);transition:background .4s,box-shadow .4s}
.ap-wait-h{display:flex;align-items:center;gap:9px;font:650 .72rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-700)}
.ap-pulse{width:9px;height:9px;flex:none;border-radius:50%;background:var(--plum-600);box-shadow:0 0 0 0 rgba(100,8,46,.5);animation:ap-pulse 1.8s infinite}
@keyframes ap-pulse{70%{box-shadow:0 0 0 8px rgba(100,8,46,0)}100%{box-shadow:0 0 0 0 rgba(100,8,46,0)}}
.ap-wait-x{margin-top:8px;font:720 1.06rem/1.32 var(--display);letter-spacing:-.005em;color:var(--plum-700)}
.ap-wait-b{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.ap-wait .k-btn--plum{background:var(--k-grain-light),var(--k-plum-clay);color:var(--cream-50);box-shadow:var(--k-plum-shadow)}
.ap-no{height:42px;padding:0 18px;border-radius:999px;font:650 .9375rem/1 var(--display);color:var(--plum-700);box-shadow:inset 0 0 0 2px rgba(100,8,46,.32);transition:background .2s}
.ap-no:hover{background:rgba(100,8,46,.08)}
.ap-wait-done{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;font:600 .9375rem/1.35 var(--text);color:var(--plum-700)}
.ap-undo{margin-inline-start:auto;padding:8px 14px;border-radius:999px;font:650 .8125rem/1 var(--display);color:var(--plum-600);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px rgba(100,8,46,.2)}
.ap-undo:hover{background:#fff}
.ap-wait.ap-yesd{background:var(--k-paper);box-shadow:var(--k-paper-shadow),inset 0 0 0 2px rgba(47,154,98,.55)}
.ap-wait-ok{position:absolute;top:-20px;inset-inline-end:-12px;width:62px;height:auto;filter:drop-shadow(0 12px 10px rgba(70,8,36,.3));transform:rotate(10deg);opacity:0;pointer-events:none}
.ap-wait.ap-yesd .ap-wait-ok{opacity:1;animation:k-pop .55s var(--spring) both}
.ap-wait.ap-yesd .ap-wait-h{color:#24603d}
.ap-wait.ap-yesd .ap-pulse,.ap-wait.ap-nod .ap-pulse{animation:none;background:#2f9a62}
.ap-wait.ap-yesd .ap-wait-done,.ap-wait.ap-yesd .ap-wait-x{color:var(--ink)}
.ap-wait.ap-nod{background:var(--k-paper);box-shadow:var(--k-paper-shadow),inset 0 0 0 2px rgba(100,8,46,.18)}
.ap-wait.ap-nod .ap-pulse{background:var(--ink-3)}

/* the assistant's note */
.ap-bub{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px 16px;border-start-start-radius:22px; border-start-end-radius:22px; border-end-end-radius:22px; border-end-start-radius:6px;background:#fff;box-shadow:inset 0 0 0 2px rgba(250,201,63,.75),0 16px 30px -18px rgba(90,40,0,.5)}
.ap-bub .ap-bdg{width:34px;height:auto;flex:none;filter:drop-shadow(0 4px 4px rgba(60,6,30,.3))}
.ap-bub-h{font:650 .72rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-500)}
.ap-bub-x{margin-top:5px;font-size:.9375rem;line-height:1.5;color:var(--ink)}
.ap-src{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;border-radius:999px;font:600 .75rem/1.2 var(--text);color:var(--plum-600);background:var(--plum-50)}
.ap-src .pb-i{width:15px;height:15px}

/* buttons of the plain app (drawn, not pressable) */
.ap-fakebtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ap-fakebtns span{padding:10px 18px;border-radius:999px;font:650 .875rem/1 var(--display);color:var(--plum-600);box-shadow:inset 0 0 0 2px rgba(100,8,46,.22)}
.ap-fakebtns .ap-main-b{background:var(--k-plum-clay);color:var(--cream-50);box-shadow:var(--k-plum-shadow)}

/* the proof: a paper panel over the window */
.ap-proof{position:absolute;z-index:6;top:72px;inset-inline-end:14px;width:min(430px,calc(100% - 28px));max-height:calc(100% - 86px);overflow:auto;padding:20px 20px 16px;border-radius:26px;background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 40px 70px -24px rgba(60,10,20,.55);animation:k-pop .4s var(--spring) both;transform-origin:90% 0}
.ap-proof-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ap-proof-top h3{font:800 1.4rem/1 var(--display);letter-spacing:-.02em;color:var(--plum-600)}
.ap-proof-top h3:focus{outline:none}
.ap-proof-top h3:focus-visible{outline:3px solid var(--plum-400);outline-offset:4px}
.ap-proof-x{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;color:var(--plum-600);background:rgba(100,8,46,.08)}
.ap-proof-x:hover{background:rgba(100,8,46,.15)}
.ap-proof-x .pb-i{width:18px;height:18px}
.ap-proof-p{margin:6px 0 14px;font-size:.875rem;color:var(--ink-3)}
.ap-pf{display:grid;gap:4px}
.ap-pf li{display:grid;grid-template-columns:44px 30px minmax(0,1fr);gap:10px;align-items:start;padding-block:10px; padding-inline:0 4px;box-shadow:inset 0 -1px 0 rgba(100,8,46,.08)}
.ap-pf li:last-child{box-shadow:none}
.ap-pf-at{padding-top:7px;font:700 .75rem/1 var(--display);color:var(--plum-500);font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-pf .ap-fc{width:30px;height:30px}
.ap-pf-x{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.ap-pf-x b{color:var(--plum-600);font-weight:700}
.ap-pf-x small{display:flex;align-items:center;gap:6px;margin-top:5px;font:600 .75rem/1.3 var(--text);color:var(--plum-500)}
.ap-pf-x small::before{content:"";width:14px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23811347' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center/contain no-repeat}
.ap-pf-you{background:linear-gradient(90deg,rgba(250,201,63,.22),rgba(250,201,63,0));border-radius:14px;animation:k-pop .5s var(--spring) both}
.ap-pf-you .ap-pf-at{padding-inline-start:8px}

/* the generic screen: the room, three numbers, what it records, the procedures */
.ap-gen{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(18px,3vw,36px);align-items:start}
.ap-gen-a{display:grid;justify-items:center;gap:18px;padding:22px 18px 24px;border-radius:26px;background:#fff;box-shadow:inset 0 1px 0 #fff,0 14px 28px -18px rgba(90,40,0,.45);text-align:center}
.ap-gen-pic{display:block;width:min(100%,190px)}
.ap-gen-pic img{width:100%;border-radius:23%;transform:rotate(-4deg);box-shadow:0 26px 30px -16px rgba(90,40,0,.55),0 6px 10px -4px rgba(90,40,0,.22)}
.ap-gen-a p{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.ap-gen-b{display:grid;gap:14px;min-width:0}
.ap-gen-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ap-gen-f li{display:grid;align-content:start;gap:6px;padding:16px 16px 14px;border-radius:20px;background:#fff;box-shadow:inset 0 1px 0 #fff,0 12px 24px -18px rgba(90,40,0,.5)}
.ap-gen-f b{font:800 2.2rem/1 var(--display);letter-spacing:-.04em;color:var(--plum-600);font-variant-numeric:tabular-nums}
.ap-gen-f span{font-size:.8125rem;line-height:1.35;color:var(--ink-3)}
.ap-gen-f .ap-gen-gold{background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow)}
.ap-gen-f .ap-gen-gold b,.ap-gen-f .ap-gen-gold span{color:var(--plum-700)}
.ap-gen-card{padding:16px 18px 18px;border-radius:22px;background:#fff;box-shadow:inset 0 1px 0 #fff,0 12px 24px -18px rgba(90,40,0,.5)}
.ap-gen-h{margin-bottom:12px;font:650 .72rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-500)}
.ap-gen-ev{display:grid;gap:9px}
.ap-gen-ev li{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--ink-2)}
.ap-gen-pbs{display:grid;gap:4px}
.ap-gen-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding-block:9px; padding-inline:8px 12px;border-radius:16px;text-decoration:none;color:var(--ink);transition:background .2s}
.ap-gen-row:hover{background:rgba(100,8,46,.05)}
.ap-gen-ic{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -3px 6px rgba(170,100,0,.3)}
.ap-gen-ic .pb-i{width:18px;height:18px}
.ap-gen-row b{font:650 .9375rem/1.25 var(--text);color:var(--plum-600);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-gen-rh{font:600 .75rem/1 var(--text);color:var(--ink-3);white-space:nowrap}
.ap-gen-row small{grid-column:2/4;font-size:.8125rem;color:var(--ink-3)}

/* narrow windows */
@media (max-width:1060px){.ap-sv-dots{display:none}.ap-sv-url{margin-inline-start:0}.ap-sv-st>span{display:none}.ap-sv-n::before{display:none}.ap-sv-st{padding-inline-end:12px}}
@media (max-width:900px){.ap-sv-main{grid-template-columns:minmax(0,1fr)}.ap-sv-rail{display:none}.ap-gen{grid-template-columns:minmax(0,1fr)}.ap-gen-a{grid-template-columns:96px minmax(0,1fr);justify-items:start;text-align:start;align-items:center}.ap-gen-pic{width:96px}}
@media (max-width:640px){
  .ap-svs .ap-sv-head{align-items:stretch}.ap-tog{display:flex;width:100%}.ap-tog .k-tab{flex:1;justify-content:center;padding:0 12px}
  .ap-sv{border-radius:26px}.ap-sv-top{height:auto;flex-wrap:wrap;gap:8px;padding:12px;border-radius:26px 26px 0 0}.ap-sv-dots{display:none}
  .ap-sv-url{flex:1 1 0;margin-inline-start:0;font-size:.75rem;padding:8px 12px}
  .ap-sv[data-layer="club"] .ap-sv-br{display:block!important;flex:0 0 100%;height:0}
  .ap-sv[data-layer="app"] .ap-sv-ex{margin-inline-start:0}.ap-sv-st{flex:0 1 auto;min-width:0;margin-inline-start:0;gap:6px;padding-block:4px; padding-inline:4px 10px}.ap-sv-st .ap-bdg{width:22px}.ap-sv-n{min-width:0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ap-proof-btn{margin-inline-start:auto;height:36px;padding-block:0; padding-inline:10px 13px;gap:6px;font-size:.84rem}.ap-proof-btn .pb-i{width:16px;height:16px}.ap-sv-main{border-radius:0 0 26px 26px}
  .ap-sv-scr{padding:18px 14px 22px}.ap-proof{top:12px;inset-inline-start:10px;inset-inline-end:10px;width:auto}
  .ap-gen-f{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ap-gen-f li{padding:12px 10px}.ap-gen-f b{font-size:1.7rem}
  .ap-gen-row{grid-template-columns:auto minmax(0,1fr)}.ap-gen-row b{white-space:normal}.ap-gen-rh,.ap-gen-row small{grid-column:2}.ap-gen-ic{grid-row:span 3;align-self:start}
  .ap-pf li{grid-template-columns:40px 28px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ap-reveal .ap-sv-body .ap-ov,.ap-pulse,.ap-isyes,.ap-pf-you,.ap-proof{animation:none}.ap-sv,.ap-wait{transition:none}}