/* The kiosk pattern (PATTERN.md): one full screen, one exchange at a time.
   Taken from the Gist kiosk (~/Code/macmail/kiosk). Sizes are in design units (--u):
   one point on a 1440x900 screen, scaled to fit. Retheme with mount({ theme }) or by overriding the tokens on .kiosk. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&family=JetBrains+Mono:wght@400&display=swap");

.kiosk{
  --ground:#0A151E; --deep:#060D13; --text:#E6EEF3; --dim:#8CA3B2; --faint:#6E8798;
  --mine:#3FC2F0; --live:#4FD08A; --warn:#E0B057; --bad:#F0736F; --rule:#243B4A; --vignette:#03080C; --flash:#FFFFFF; --shade:#010407;
  /* the same colours as r,g,b, for glows and the canvas; kiosk.js keeps them in step when a theme sets a hex */
  --mine-rgb:63,194,240; --live-rgb:79,208,138; --bad-rgb:240,115,111; --vignette-rgb:3,8,12; --flash-rgb:255,255,255; --shade-rgb:1,4,7;
  --sans:"IBM Plex Sans", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --mono:"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --u:1px; --frame:1180px; --col:900px;
  --move:cubic-bezier(.25,1,.35,1);      /* Motion.Focus.move: spring 0.55 / 0.85 */
  --recede:cubic-bezier(.3,1.08,.5,1);   /* Motion.Focus.recede: spring 0.66 / 0.80 */
  --fluid:cubic-bezier(.34,1.18,.6,1);   /* Motion.fluid: spring 0.58 / 0.74 */
  position:fixed;inset:0;overflow:hidden;color-scheme:dark;cursor:text;
  background:linear-gradient(var(--ground),var(--deep));color:var(--text);
  font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;
}
.kiosk *{box-sizing:border-box}

/* The ground: layers behind everything (Ground.swift) */
.kiosk .k-ground{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kiosk .k-ground i{position:absolute;inset:0;display:block}
.kiosk .k-breathe{background:radial-gradient(circle calc(660*var(--u)) at 50% 50%,var(--mine),transparent);opacity:.085;transition:opacity 1.6s ease-in-out}
.kiosk.typing .k-breathe{opacity:.13;transition:opacity .45s ease-out}
.kiosk .k-cool{background:radial-gradient(circle calc(700*var(--u)) at 10% -10%,rgba(var(--mine-rgb),.05),transparent)}
.kiosk .k-warm{background:radial-gradient(circle calc(620*var(--u)) at 95% 104%,rgba(var(--live-rgb),.032),transparent)}
.kiosk .k-drift{transition:opacity .8s ease-in-out}
.kiosk.idle .k-drift{opacity:0}
.kiosk .k-drift b,.kiosk .k-drift b::after{position:absolute;inset:-10%;display:block}
.kiosk .k-drift b{animation:k-drift-y 53s ease-in-out infinite alternate}
.kiosk .k-drift b::after{content:"";inset:0;background:radial-gradient(circle calc(540*var(--u)) at 26% 68%,rgba(var(--mine-rgb),.055),rgba(var(--mine-rgb),.038) 35%,rgba(var(--mine-rgb),.012) 70%,transparent);animation:k-drift-x 38s ease-in-out infinite alternate}
@keyframes k-drift-x{from{transform:translateX(calc(-30*var(--u))) scale(1.02)}to{transform:translateX(calc(34*var(--u))) scale(1.08)}}
@keyframes k-drift-y{from{transform:translateY(calc(18*var(--u)))}to{transform:translateY(calc(-22*var(--u)))}}
.kiosk .k-vignette{background:radial-gradient(circle at 50% 50%,transparent calc(320*var(--u)),rgba(var(--vignette-rgb),.66) calc(980*var(--u)))}

.kiosk .k-aurora b{position:absolute;width:calc(900*var(--u));height:calc(900*var(--u));border-radius:50%;filter:blur(calc(90*var(--u)));opacity:.16}
.kiosk .k-aurora b:first-child{background:var(--mine);left:-10%;top:-20%;animation:k-wander-a 47s ease-in-out infinite alternate}
.kiosk .k-aurora b:last-child{background:var(--live);right:-15%;bottom:-30%;opacity:.10;animation:k-wander-b 61s ease-in-out infinite alternate}
@keyframes k-wander-a{to{transform:translate(calc(380*var(--u)),calc(160*var(--u))) scale(1.15)}}
@keyframes k-wander-b{to{transform:translate(calc(-420*var(--u)),calc(-120*var(--u))) scale(.9)}}

.kiosk canvas.k-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* The plane: one column, moved so the cursor or the reply sits at the centre */
.kiosk .k-stage{position:absolute;inset:0;-webkit-mask-image:linear-gradient(transparent,#000 calc(140*var(--u)));mask-image:linear-gradient(transparent,#000 calc(140*var(--u)))}
.kiosk .k-plane{position:absolute;left:50%;top:0;width:var(--frame);transform:translate(-50%,0);transition:transform .55s var(--move),opacity .3s ease-out,filter .3s ease-out}
.kiosk[data-phase="release"] .k-plane{opacity:0;filter:blur(calc(14*var(--u)));transition:transform .55s var(--move),opacity .36s ease-in,filter .36s ease-in}
.kiosk[data-phase="vortex"] .k-plane{opacity:0;transition:none}

.kiosk .k-block{transform-origin:left bottom;transition:transform .66s var(--recede),opacity .66s var(--recede)}
.kiosk .k-block[hidden]{display:none}
.kiosk.over .k-block{transform:scale(.88);opacity:.52}
.kiosk .k-block.leaving{opacity:0;transform:translateY(calc(-24*var(--u)));transition:opacity .18s ease-in,transform .18s ease-in}

.kiosk .k-echo{font:400 calc(13*var(--u))/calc(22*var(--u)) var(--mono);letter-spacing:calc(.6*var(--u));color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--col);margin-bottom:calc(18*var(--u))}
.kiosk .k-echo:empty{display:none}
.kiosk .k-rows{max-width:var(--col)}
.kiosk .k-rows.wide{max-width:none}
.kiosk .k-status{display:inline-block;margin-top:calc(26*var(--u));font:400 calc(12*var(--u))/1.4 var(--mono);letter-spacing:calc(1.6*var(--u));color:var(--faint);background:none;border:0;padding:0;text-align:left;cursor:default}
.kiosk .k-status.act{cursor:pointer}
.kiosk .k-status.act:hover,.kiosk .k-status.act:focus-visible{color:var(--dim);outline:none}
.kiosk .k-status:empty{display:none}

/* Condense (KioskView.swift:260-282): each row waits as a soft band, then comes out of it */
.kiosk .k-row{position:relative;white-space:pre;font-size:calc(var(--fs)*var(--u));line-height:calc(var(--lh)*var(--u));height:calc(var(--lh)*var(--u));letter-spacing:calc(-.3*var(--u))}
.kiosk .k-row.gap{height:calc(var(--lh)*.55*var(--u))}
.kiosk .k-row>span{display:inline-block;opacity:0;filter:blur(calc(11*var(--u)));transform:translateY(calc(20*var(--u))) scale(.97);transform-origin:left center;color:var(--mine);transition:opacity .6s var(--fluid),filter .6s var(--fluid),transform .6s var(--fluid),color .6s ease-out}
.kiosk .k-row::before,.kiosk .k-item::before{content:"";position:absolute;left:0;top:50%;height:max(calc(7*var(--u)),calc(var(--fs)*.36*var(--u)));width:calc(var(--w)*var(--u));max-width:100%;transform:translateY(-50%);border-radius:999px;background:rgba(var(--mine-rgb),.2);filter:blur(calc(7*var(--u)));transition:opacity .3s ease-out}
.kiosk .k-row.gap::before{display:none}
.kiosk .k-row.in>span{opacity:1;filter:blur(0);transform:none;color:var(--text)}
.kiosk .k-row.in::before,.kiosk .k-item.in::before{opacity:0}

/* A list, as Gist's gist list: five to a screen, a title line and one sentence each */
.kiosk .k-item{position:relative;height:calc(120*var(--u));--fs:22;--w:944}
.kiosk .k-item::before{height:calc(9*var(--u));top:calc(17*var(--u))}
.kiosk .k-item>div{opacity:0;filter:blur(calc(11*var(--u)));transform:translateY(calc(20*var(--u))) scale(.97);transform-origin:left center;transition:opacity .6s var(--fluid),filter .6s var(--fluid),transform .6s var(--fluid)}
.kiosk .k-item.in>div{opacity:1;filter:blur(0);transform:none}
.kiosk .k-item .who{display:flex;gap:calc(16*var(--u));font-size:calc(22*var(--u));line-height:calc(34*var(--u));height:calc(34*var(--u));color:var(--text);white-space:nowrap}
.kiosk .k-item .who span:first-child{overflow:hidden;text-overflow:ellipsis;flex:1}
.kiosk .k-item .stamp{font:400 calc(14*var(--u))/calc(34*var(--u)) var(--mono);color:var(--faint);width:calc(130*var(--u));text-align:right;flex:none;overflow:hidden;text-overflow:ellipsis}
.kiosk .k-item .what{font-size:calc(20*var(--u));line-height:calc(30*var(--u));color:var(--dim);max-width:calc(1060*var(--u));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* In a tour the items are read, not scanned: every word shows */
.kiosk .k-rows.whole .k-item{height:auto;min-height:calc(120*var(--u));padding-bottom:calc(24*var(--u));box-sizing:border-box}
.kiosk .k-rows.whole .k-item .what{display:block;-webkit-line-clamp:none}
.kiosk .k-rows.whole .k-item .who{height:auto;white-space:normal}
.kiosk .k-rows.whole .k-item .who span:first-child{overflow:visible}
.kiosk .k-item .dot{position:absolute;left:calc(-20*var(--u));top:calc(13.5*var(--u));width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:var(--c)}
.kiosk .k-item.lit::after{content:"";position:absolute;inset:calc(-10*var(--u)) calc(-34*var(--u)) calc(16*var(--u));border-radius:calc(12*var(--u));background:rgba(var(--mine-rgb),.12);z-index:-1}

/* The prompt (PromptEditor.swift): your words, large, in the cursor's colour */
.kiosk .k-prompt{position:relative}
.kiosk .k-block:not([hidden])+.k-prompt{margin-top:calc(52*var(--u))}
.kiosk textarea{display:block;width:100%;margin:0;padding:0;border:0;outline:0;resize:none;overflow:hidden;background:transparent;color:var(--mine);caret-color:var(--mine);font-family:var(--sans);font-weight:300;font-size:calc(54*var(--u));line-height:calc(71*var(--u));height:calc(71*var(--u))}
.kiosk[data-phase="release"] .k-prompt,.kiosk[data-phase="vortex"] .k-prompt,.kiosk[data-phase="landing"] .k-prompt{visibility:hidden}

.kiosk .k-commands{position:absolute;left:0;top:calc(100% + 18*var(--u));width:min(calc(430*var(--u)),100%);padding:calc(8*var(--u)) 0;border-radius:calc(14*var(--u));background:var(--deep);border:1px solid var(--rule);box-shadow:0 calc(14*var(--u)) calc(30*var(--u)) rgba(0,0,0,.55);transition:opacity .3s var(--fluid),transform .3s var(--fluid)}
.kiosk .k-commands[hidden]{display:block;opacity:0;transform:translateY(calc(-10*var(--u)));pointer-events:none}
.kiosk .k-commands div{display:flex;gap:calc(20*var(--u));align-items:center;height:calc(38*var(--u));padding:0 calc(18*var(--u));cursor:pointer}
.kiosk .k-commands div.on{background:rgba(var(--mine-rgb),.10)}
.kiosk .k-commands b{font:400 calc(15*var(--u)) var(--mono);color:var(--faint);width:calc(96*var(--u));flex:none}
.kiosk .k-commands div.on b{color:var(--mine)}
.kiosk .k-commands span{font-size:calc(15*var(--u));color:var(--faint)}
.kiosk .k-commands div.on span{color:var(--dim)}

.kiosk .k-note{margin-top:calc(26*var(--u));min-height:calc(20*var(--u))}
.kiosk .k-note .invite{font-size:calc(22*var(--u));line-height:calc(34*var(--u));color:var(--faint)}
.kiosk .k-note .hint{font:400 calc(12*var(--u))/1.6 var(--mono);letter-spacing:calc(1.6*var(--u));color:var(--faint);opacity:.75;margin-top:calc(8*var(--u))}
.kiosk .k-note .err{font:400 calc(13*var(--u))/1.5 var(--mono);color:var(--warn)}
.kiosk .k-note .said{font:400 calc(13*var(--u))/1.5 var(--mono);color:var(--dim)}
.kiosk .k-note>*{animation:k-fade .3s ease-out}
@keyframes k-fade{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .kiosk .k-plane,.kiosk .k-block,.kiosk .k-row>span,.kiosk .k-item>div,.kiosk .k-commands{transition-duration:.15s!important}
  .kiosk .k-drift b,.kiosk .k-drift b::after,.kiosk .k-aurora b{animation:none}
}