/* Quiet Hours web app.
   The screen rules in the middle section are the approved mocks' own (design/screens.html), kept as drawn.
   Above them: the page and the one 390 x 844 stage. Below them: what the app needs that the mocks draw as pictures
   (real inputs) and the few undesigned states, in the same language. */
:root{ --sans:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; --serif:'Instrument Serif',Georgia,serif;
  --k:1; --line:rgba(239,235,229,.16) }
html,body{margin:0;min-height:100%}
body{background:#EAE5DE;font-family:var(--sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
html.dark-surface body{background:#080706}

/* The stage: drawn at 390 x 844 and scaled as one piece. */
.page{display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh}
.frame{position:relative;flex:none;width:calc(390px * var(--k));height:calc(844px * var(--k))}
.stage{position:absolute;left:0;top:0;width:390px;height:844px;overflow:hidden;transform:scale(var(--k));transform-origin:0 0;background:#EAE5DE}
html.dark-surface .stage{background:#080706}
/* A wide viewport shows the stage as a phone, as the mock page does. */
html.wide body{background:#1B1A18}
html.wide .page{justify-content:center;padding:24px 16px;box-sizing:border-box}
html.wide .stage{border-radius:52px;box-shadow:0 0 0 1px var(--line),0 30px 60px -20px rgba(0,0,0,.35)}

/* ------------------------------------------------------------------------------------------------
   The mocks' screen rules (design/screens.html), unchanged apart from dropping the parts that only drew
   pictures of a keyboard, a typed caret or earlier experiments. */
/* The screen. These colours are the product's own, fixed by design. */
.s{position:absolute;inset:0;background:#EAE5DE;color:#1C1A18;font-family:var(--sans);overflow:hidden}
.art{position:absolute;left:0;top:0;width:390px;height:540px;max-width:none;display:block}
.name{position:absolute;left:0;right:0;top:340px;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:74px;line-height:74px;letter-spacing:0;
  text-shadow:0 0 6px #EAE5DE,0 0 6px #EAE5DE,0 0 12px #EAE5DE}
.sub{position:absolute;left:0;right:0;top:430px;margin:0;padding:0 48px;text-align:center;font-size:18px;line-height:26px;font-weight:300;color:#6A635B}
.s form{position:absolute;left:24px;right:24px;bottom:34px;display:flex;flex-direction:column;gap:12px}
.rowf{height:58px;border-radius:29px;background:#DED8D0;display:flex;align-items:center;gap:12px;padding:0 22px;
  box-shadow:inset 0 2px 4px rgba(70,52,36,.13),0 1px 0 rgba(255,255,255,.7)}
.rowf label{font-size:15px;color:#6A635B;flex:none}
.rowf input{flex:1;min-width:0;border:0;background:transparent;text-align:right;font:400 16px var(--sans);color:#1C1A18;outline:none}
.rowf input::placeholder{color:#8A8279}
.rowf:focus-within,.rowf.on{box-shadow:inset 0 3px 6px rgba(70,52,36,.18),0 1px 0 rgba(255,255,255,.7)}
.go{height:58px;border:0;border-radius:29px;background:#1C1A18;color:#F3EFE9;font:500 17px var(--sans);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 20px -10px rgba(28,26,24,.5)}
.go:focus-visible{outline:2px solid #990000;outline-offset:3px}
.fine{margin:4px 0 0;text-align:center;font-size:13px;color:#7A7269}

.s.c .name{top:356px}
.s.c .sub{top:446px}
/* With the keyboard up: everything rides up by the same amount, the form sits on the keyboard. */
.s.k .art{top:-214px}
.s.k .name{top:126px}
.s.k .sub{top:216px}
.s.c.k .art{top:-226px}
.s.c.k .name{top:130px}
.s.c.k .sub{top:220px}
.s.d .name{top:402px}
.s.d .sub{top:490px}
.s.d.k .name{top:176px}
.s.d.k .sub{top:264px}
.s.k form{bottom:352px}

.s canvas{position:absolute;left:0;top:0;width:390px;height:844px;display:block}
.s .sub{transition:opacity .4s}

/* How it works: the moon's dots re-form into each step's picture. */
.s.hw canvas{position:absolute;left:0;top:0;width:390px;height:460px;display:block}
.s.hw .step{position:absolute;left:0;right:0;top:404px;margin:0;padding:0 28px;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:50px;line-height:54px;transition:opacity .25s}
.s.hw .sub{top:470px;padding:0 44px;transition:opacity .25s}
@keyframes hwin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.s.hw.in .step,.s.hw.in .sub{animation:hwin .5s ease both}
@media (prefers-reduced-motion: reduce){.s.hw.in .step,.s.hw.in .sub{animation:none}}
.s.hw .go{position:absolute;left:24px;right:24px;bottom:34px}
.s.lk .foot{position:absolute;left:24px;right:24px;bottom:34px;display:flex;flex-direction:column;gap:12px}
.s.lk .go{position:static}
/* Home. A small bar on top, the state's picture, one line, then what you can do. */
.s.hm .bar{position:absolute;left:24px;right:24px;top:52px;display:flex;align-items:center;justify-content:space-between}
.s.hm .wm{font-family:var(--serif);font-style:italic;font-size:25px;line-height:1}
.s.hm .gear{width:42px;height:42px;border-radius:50%;border:0;background:#EFEBE5;color:#1C1A18;display:grid;place-items:center;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 12px -6px rgba(70,52,36,.32),0 1px 2px rgba(70,52,36,.1)}
.s.hm canvas{position:absolute;left:0;top:92px;width:390px;height:190px;display:block}
.s.hm .step{position:absolute;left:0;right:0;top:284px;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:46px;line-height:50px}
.s.hm .sub{top:338px;font-size:16px;line-height:22px}
.opts{position:absolute;left:24px;right:24px;top:380px;display:flex;flex-direction:column;gap:12px}
.opt{display:block;width:100%;text-align:left;border:0;border-radius:26px;padding:14px 18px;background:#EFEBE5;color:#1C1A18;font-family:var(--sans);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 16px -9px rgba(70,52,36,.32),0 1px 2px rgba(70,52,36,.1);transition:box-shadow .2s,background .2s}
.opt.on{background:#E0DAD2;box-shadow:inset 0 3px 6px rgba(70,52,36,.2),0 1px 0 rgba(255,255,255,.7)}
.opt:focus-visible{outline:2px solid #1C1A18;outline-offset:3px}
.opt .r1{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.opt .d{font-size:19px;font-weight:500}
.opt .t{font-size:16px}
.opt .why{display:block;margin-top:2px;font-size:14px;line-height:20px;color:#6A635B}
.opt .r3{display:flex;align-items:center;gap:12px;margin-top:9px}
.track{flex:1;height:5px;border-radius:3px;background:#D8D2C9;box-shadow:inset 0 1px 2px rgba(70,52,36,.22)}
.opt.on .track{background:#D2CCC3}
.track b{display:block;height:5px;border-radius:3px;background:#1C1A18;transition:width .3s}
.opt .n{font-size:12px;color:#6A635B;min-width:70px;text-align:right}
.s.hm .fine{position:absolute;left:0;right:0;bottom:68px}
.optout{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;height:44px;padding:0 14px;border:0;background:transparent;color:#6A635B;font:400 14px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.optout:focus-visible{outline:2px solid #1C1A18;outline-offset:2px}
/* Opted out: the screen stays where it was but fades right back, and one dark button is the only thing to press. */
.s.out canvas{opacity:.16}
.s.out .step,.s.out .time,.s.out .until,.s.out .well .num,.s.out .well p{color:#ADA69C}
.s.out .sub,.s.out .lab{color:#1C1A18;font-weight:500}
.s.out .opt{background:transparent;box-shadow:none;border:0;cursor:default;color:#ADA69C}
.s.out .opt .why,.s.out .opt .n{color:#ADA69C}
.s.out .opt .d{font-weight:400}
.s.out .opt .track{box-shadow:none;background:rgba(28,26,24,.05)}
.s.out .opt .track b{background:#CFC8BE}
.s.out .well{background:transparent;box-shadow:none}
.s.out .fine{bottom:104px}
.s.out .go{position:absolute;left:24px;right:24px;bottom:34px}
/* Home on the day: the same screen, drawn tighter, with the board appearing underneath. */
.s.day .lab{top:124px}
.s.day .step{top:146px}
.s.day .time{top:232px}
.s.day .until{top:272px}
.s.day .well{top:318px;padding:18px 20px 20px}
.s.day .well .num{font-size:66px;line-height:66px}
.s.day .well p + p{margin-top:4px;font-size:16px;line-height:22px}
.board{position:absolute;left:24px;right:24px;top:468px;display:block;text-align:left;border:0;border-radius:28px;padding:16px 20px 18px;background:#EFEBE5;color:#1C1A18;font-family:var(--sans);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 16px -9px rgba(70,52,36,.32),0 1px 2px rgba(70,52,36,.1)}
.board:focus-visible{outline:2px solid #1C1A18;outline-offset:3px}
.board .hd{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:500}
.board .ct{font-size:13px;font-weight:400;color:#6A635B}
.board .ln{display:block;margin-top:8px;font-size:15px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .ln + .ln{margin-top:4px}
.board .ln i{font-style:normal;color:#6A635B}
.addrow{position:absolute;left:24px;right:24px;top:590px;height:56px;border:0;border-radius:28px;background:#DED8D0;color:#6A635B;font:400 15px var(--sans);display:flex;align-items:center;justify-content:space-between;padding:0 9px 0 22px;cursor:pointer;
  box-shadow:inset 0 2px 4px rgba(70,52,36,.13),0 1px 0 rgba(255,255,255,.7)}
.addrow:focus-visible{outline:2px solid #1C1A18;outline-offset:3px}
.addrow b{width:38px;height:38px;border-radius:50%;background:#1C1A18;color:#F3EFE9;display:grid;place-items:center;box-shadow:0 6px 10px -5px rgba(28,26,24,.5)}
/* The board as a stack of cards that opens to take over the screen. Two versions: the list in a depression (tr), or fading at the edges (fd). */
.stk{position:absolute;left:0;right:0;top:494px;margin:0;text-align:center;font-size:15px;color:#6A635B}
.cw{position:absolute;inset:0;z-index:20;pointer-events:none}
.pc{position:absolute;left:24px;right:24px;height:76px;box-sizing:border-box;border-radius:26px;padding:15px 20px;background:#EFEBE5;z-index:calc(20 - var(--i));pointer-events:auto;
  top:calc(524px + var(--i) * 10px);transform:scale(calc(1 - var(--i) * .05));transform-origin:50% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 16px -9px rgba(70,52,36,.34),0 1px 2px rgba(70,52,36,.1);
  transition:top .55s cubic-bezier(.2,.8,.2,1),left .55s cubic-bezier(.2,.8,.2,1),right .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s}
.pc.h{opacity:0}
.pc b{display:block;font-size:16px;font-weight:500;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc span{display:block;font-size:14px;line-height:20px;color:#6A635B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td{position:absolute;right:20px;top:37px;height:20px;padding:0;border:0;background:none;color:#1C1A18;font-family:inherit;font-size:14px;line-height:20px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(28,26,24,.35);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.td::after{content:"";position:absolute;inset:-12px -14px}
.td:focus-visible{outline:2px solid #1C1A18;outline-offset:2px}
.stkbtn{position:absolute;left:24px;right:24px;top:518px;height:112px;border:0;background:transparent;border-radius:26px;cursor:pointer;z-index:30}
.stkbtn:focus-visible{outline:2px solid #1C1A18;outline-offset:3px}
.home{transition:opacity .3s}
.bd{opacity:0;pointer-events:none;transition:opacity .35s}
.bd .bt{position:absolute;left:24px;top:60px;margin:0;font-family:var(--serif);font-style:italic;font-size:44px;line-height:48px}
.bd .bc{position:absolute;left:24px;right:80px;top:112px;margin:0;font-size:15px;color:#6A635B}
.bd .x{position:absolute;right:24px;top:58px;width:44px;height:44px;border-radius:50%;border:0;background:#EFEBE5;color:#1C1A18;display:grid;place-items:center;cursor:pointer;z-index:40;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 12px -6px rgba(70,52,36,.32),0 1px 2px rgba(70,52,36,.1)}
.bd .cmp{position:absolute;left:24px;right:24px;bottom:34px;height:58px;border-radius:29px;background:#DED8D0;color:#6A635B;font-size:15px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 22px;z-index:40;
  box-shadow:inset 0 2px 4px rgba(70,52,36,.13),0 1px 0 rgba(255,255,255,.7)}
.bd .cmp b{width:38px;height:38px;border-radius:50%;background:#1C1A18;color:#F3EFE9;display:grid;place-items:center}
.s.open .home{opacity:0;pointer-events:none}
.s.open .bd{opacity:1;pointer-events:auto}
.s.open{touch-action:none}
.s.open .pc{top:var(--y, 156px);transform:none;opacity:1}
.s.open .pc.me span{padding-right:84px}
.s.open .td{opacity:1;pointer-events:auto}
.s.open .pc.gone{opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .25s,transform .25s}
.s.live .pc{transition:none}
.s.open .stkbtn{display:none}
/* tr: a depression holds the list; cards pass under its rim. */
.tray,.rim{position:absolute;left:14px;right:14px;top:150px;bottom:104px;border-radius:36px}
.tray{display:none;background:#DED8D0}
.rim{display:none;z-index:25;pointer-events:none;opacity:0;transition:opacity .35s;box-shadow:inset 0 3px 7px rgba(70,52,36,.2),inset 0 0 0 1px rgba(70,52,36,.03),0 1px 0 rgba(255,255,255,.75)}
.tr .tray,.tr .rim{display:block}
.tr.open .rim{opacity:1}
.tr .cw{clip-path:inset(0 0 0 0 round 0);transition:clip-path .55s cubic-bezier(.2,.8,.2,1)}
.tr.open .cw{clip-path:inset(150px 14px 104px 14px round 36px)}
.tr.open .pc{left:26px;right:26px}
/* fd: the list dissolves into the surface above and below. */
.fd .cw{-webkit-mask-image:linear-gradient(to bottom,transparent 132px,#000 166px,#000 708px,transparent 742px);mask-image:linear-gradient(to bottom,transparent 132px,#000 166px,#000 708px,transparent 742px)}
@media (prefers-reduced-motion: reduce){.pc,.home,.bd,.td,.rim,.tr .cw{transition:none}}
/* Home, locked: the surface goes dark and the moon comes out, one light dot for each person who is in. */
.s.nt{background:#1B1917;color:#EAE5DE}
.lmoon{position:absolute;left:0;top:100px;width:390px;height:240px;display:block}
.nl{position:absolute;left:0;right:0;top:350px;margin:0;text-align:center;font-size:15px;color:#9B9289}
.nu{position:absolute;left:0;right:0;top:370px;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:60px;line-height:64px}
.nc{position:absolute;left:0;right:0;top:442px;margin:0;text-align:center;font-size:15px;color:#9B9289}
.nt .stk,.nt .fine,.nt .optout,.nt .pc span,.nt .bd .bc{color:#9B9289}
.s.hm.nt .gear,.nt .bd .x{background:#27231F;color:#EAE5DE;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 12px -6px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.4)}
.nt .pc{background:#27231F;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 16px -9px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.4)}
.nt .td{color:#EAE5DE;text-decoration-color:rgba(234,229,222,.4)}
.nt .bd .cmp{background:#131110;color:#8B837A;box-shadow:inset 0 2px 4px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.06)}
.nt .bd .cmp b{background:#EAE5DE;color:#1C1A18}
.nt .stkbtn:focus-visible,.nt .optout:focus-visible,.nt .td:focus-visible{outline-color:#EAE5DE}
/* Locked, near-black, and the same with stars across the whole screen. */
.s.nt.nb{background:#080706}
.s.hm.nt.nb .gear,.nt.nb .bd .x,.nt.nb .pc{background:#161412;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 16px -9px #000,0 0 0 1px rgba(255,255,255,.025)}
.nt.nb .bd .cmp{background:#020202;box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.stars{position:absolute;left:0;top:0;width:390px;height:844px;display:block;pointer-events:none}
/* The question, the moment the window ends: one picture, one line to write, one button. */
.s.q .lab{position:absolute;left:0;right:0;top:382px;margin:0;text-align:center;font-size:15px;color:#6A635B}
.s.q .step{top:406px}
.s.q .sub{top:468px}
.qf{position:absolute;left:24px;right:24px;top:514px;height:128px;box-sizing:border-box;border-radius:28px;padding:16px 20px;background:#DED8D0;font-size:17px;line-height:24px;color:#8A8279;
  box-shadow:inset 0 2px 4px rgba(70,52,36,.13),0 1px 0 rgba(255,255,255,.7)}
.qf.on{color:#1C1A18;box-shadow:inset 0 3px 6px rgba(70,52,36,.18),0 1px 0 rgba(255,255,255,.7)}
.qn{position:absolute;right:30px;top:332px;margin:0;font-size:13px;color:#7A7269}
.s.q .foot{position:absolute;left:24px;right:24px;bottom:18px;display:flex;flex-direction:column;gap:2px}
.s.q .go{position:static}
.skip{height:44px;border:0;background:transparent;color:#6A635B;font:400 14px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.skip:focus-visible{outline:2px solid #1C1A18;outline-offset:2px}
.s.q.k .lab{top:66px}
.s.q.k .step{top:90px}
.s.q.k .sub{top:152px}
.s.q.k .qf{top:196px;height:auto;min-height:104px}
.s.q.k .foot{bottom:352px}
/* Home, summary: one view. The number, then a handful of highlights set as plain lines. */
.s.sel.sm .lab{top:128px}
.s.sel.sm .step{top:150px;font-size:62px;line-height:66px}
.s.sm .well{top:232px;padding:16px 10px 15px;display:grid;grid-template-columns:repeat(3,1fr)}
.well.three b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:34px;line-height:36px}
.well.three span{display:block;margin-top:2px;font-size:13px;line-height:18px;color:#6A635B}
.s.sm .stk{top:346px}
.hl{position:absolute;left:0;right:0;top:360px;padding:0 34px;text-align:center}
.hl p{margin:0 0 22px;font-family:var(--serif);font-style:italic;font-size:25px;line-height:30px}
.s.hm.sm .fine{bottom:40px}
/* Opted out, on the day and during the window: everything stays but goes quiet; one button is the only thing to press. */
.s.out .stk,.s.out .pc,.s.out .pc span{color:#ADA69C}
.s.out .pc,.nt.off .pc{background:transparent;box-shadow:none;text-align:center;pointer-events:none}
.nt.off .lmoon{opacity:.2}
.nt.off .stars{opacity:.6}
.nt.off .nl{color:#EAE5DE;font-weight:500}
.nt.off .nu,.nt.off .nc,.nt.off .stk,.nt.off .pc,.nt.off .pc span,.nt.off .fine{color:#5F5850}
.s.hm.nt.off .fine{bottom:104px}
.nt.off .go{position:absolute;left:24px;right:24px;bottom:34px;background:#EAE5DE;color:#1C1A18;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 20px -10px #000}
.s.sel.sm .lab.me{color:#1C1A18;font-weight:500}
/* Home, selected: the time itself is the subject. */
.s.sel .lab{position:absolute;left:0;right:0;top:134px;margin:0;text-align:center;font-size:16px;color:#6A635B}
.s.sel .step{top:158px;font-size:80px;line-height:82px}
.s.sel .time{position:absolute;left:0;right:0;top:246px;margin:0;text-align:center;font-size:27px;line-height:32px}
.s.sel .until{position:absolute;left:0;right:0;top:288px;margin:0;text-align:center;font-size:16px;color:#6A635B}
.well{position:absolute;left:24px;right:24px;top:356px;border-radius:32px;padding:26px 24px 28px;background:#DED8D0;text-align:center;
  box-shadow:inset 0 3px 7px rgba(70,52,36,.16),0 1px 0 rgba(255,255,255,.7)}
.well .num{margin:0;font-family:var(--serif);font-style:italic;font-size:84px;line-height:84px}
.well p + p{margin:6px 0 0;font-size:17px;line-height:24px;color:#6A635B}
.pips{position:absolute;left:0;right:0;bottom:116px;display:flex;justify-content:center;gap:8px}
.pips i{width:8px;height:8px;border-radius:50%;background:#DED8D0;box-shadow:inset 0 1px 2px rgba(70,52,36,.2);transition:background .3s}
.pips i.on{background:#1C1A18;box-shadow:none}

/* ------------------------------------------------------------------------------------------------
   What the mocks draw as pictures, made real. Same sizes and colours as the drawn versions. */
[hidden]{display:none !important}
/* Canvases that stand in for the mocks' images keep the images' boxes. */
.s canvas.lmoon,.s.hm canvas.lmoon{top:100px;width:390px;height:240px}
/* The board's composer: a real field and a real send button in the drawn pill. */
.bd .cmp{flex-direction:row;gap:12px} /* the composer is a form; the sign-in form rule above stacks forms in a column */
.bd .cmp input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;font:400 15px var(--sans);color:#1C1A18;caret-color:#1C1A18;outline:none}
.bd .cmp input::placeholder{color:#6A635B;opacity:1}
.bd .cmp:focus-within{box-shadow:inset 0 3px 6px rgba(70,52,36,.18),0 1px 0 rgba(255,255,255,.7)}
.bd .cmp .snd{flex:none;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:50%;background:#1C1A18;color:#F3EFE9;display:grid;place-items:center;cursor:pointer}
.bd .cmp .snd:focus-visible{outline:2px solid #1C1A18;outline-offset:2px}
.nt .bd .cmp input{color:#EAE5DE;caret-color:#EAE5DE}
.nt .bd .cmp input::placeholder{color:#8B837A}
.nt .bd .cmp:focus-within{box-shadow:inset 0 3px 6px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.nt .bd .cmp .snd{background:#EAE5DE;color:#1C1A18}
.nt .bd .cmp .snd:focus-visible{outline-color:#EAE5DE}
/* The question's field: a real textarea in the drawn well. */
textarea.qf{display:block;width:342px;margin:0;border:0;resize:none;outline:none;overflow:hidden;font-family:var(--sans);font-weight:400;color:#1C1A18;caret-color:#1C1A18}
textarea.qf::placeholder{color:#8A8279;opacity:1}
.s.q .qn{display:none}
.s.q.k .qn{display:block}
.s.q.k canvas,.s.q.k .skip{display:none}

/* Real reasons run longer than the mock's samples: two lines at most, so three options still clear the line below them. */
.opt .why{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* ------------------------------------------------------------------------------------------------
   Undesigned states, as plain as possible. */
/* One quiet line: loading, nothing scheduled, can't reach the server. */
.quiet{position:absolute;left:0;right:0;top:410px;margin:0;padding:0 34px;text-align:center;font-size:15px;line-height:21px;color:#6A635B}
/* Settings, behind the gear: who is signed in, and Sign out. */
.sheet{position:absolute;inset:0;z-index:60;background:#EAE5DE;opacity:0;pointer-events:none;transition:opacity .35s}
.sheet.on{opacity:1;pointer-events:auto}
.sheet .x{position:absolute;right:24px;top:58px;width:44px;height:44px;border-radius:50%;border:0;background:#EFEBE5;color:#1C1A18;display:grid;place-items:center;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 12px -6px rgba(70,52,36,.32),0 1px 2px rgba(70,52,36,.1)}
.sheet .x:focus-visible{outline:2px solid #1C1A18;outline-offset:3px}
.sheet .who{position:absolute;left:0;right:0;top:134px;margin:0;text-align:center;font-size:16px;color:#6A635B}
.sheet .em{position:absolute;left:24px;right:24px;top:158px;margin:0;text-align:center;font-size:27px;line-height:32px;overflow-wrap:anywhere}
.sheet .go{position:absolute;left:24px;right:24px;bottom:34px}
.nt .sheet{background:#1B1917}
.nt.nb .sheet{background:#080706}
.nt .sheet .who{color:#9B9289}
.nt .sheet .x{background:#161412;color:#EAE5DE;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 16px -9px #000,0 0 0 1px rgba(255,255,255,.025)}
.nt .sheet .x:focus-visible{outline-color:#EAE5DE}
.nt .sheet .go{background:#EAE5DE;color:#1C1A18;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 20px -10px #000}
@media (prefers-reduced-motion: reduce){.sheet{transition:none}}

/* The demo strip: only with ?demo=, outside the phone. */
.demo{box-sizing:border-box;width:100%;max-width:420px;padding:14px 16px 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font:400 13px var(--sans);color:#6A635B}
.demo button{height:32px;padding:0 12px;border-radius:16px;border:1px solid rgba(28,26,24,.22);background:transparent;color:inherit;font:inherit;cursor:pointer}
.demo button:disabled{opacity:.5;cursor:default}
.demo .st{flex-basis:100%;margin:2px 0 0;text-align:center;min-height:18px}
html.wide .demo,html.dark-surface .demo{color:#A9A39B}
html.wide .demo button,html.dark-surface .demo button{border-color:rgba(239,235,229,.2)}
/* A loading line waits a moment before it shows, so a quick load doesn't flash it. */
@keyframes qh-late{from{opacity:0}to{opacity:1}}
.quiet.late{animation:qh-late .3s ease .6s both}
@media (prefers-reduced-motion: reduce){.quiet.late{animation:none}}

/* The sample campus's steps: outside the product, so plain and secondary, in the mock page's own label style. */
.steps{box-sizing:border-box;width:100%;padding:22px 16px 30px;background:#1B1A18;color:#A9A39B;font-family:var(--sans)}
.steps .row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1180px;margin:0 auto}
.steps button{height:32px;margin:0;padding:0 14px;border-radius:16px;border:1px solid rgba(239,235,229,.16);background:transparent;color:#A9A39B;font:400 14px var(--sans);letter-spacing:.04em;cursor:pointer}
.steps button:hover{color:#EFEBE5}
.steps button.on{background:#EFEBE5;border-color:#EFEBE5;color:#1B1A18}
.steps button:focus-visible{outline:2px solid #EFEBE5;outline-offset:2px}
.steps .out{margin-left:10px}
.steps .out.on{background:rgba(239,235,229,.12);border-color:rgba(239,235,229,.5);color:#EFEBE5}
.steps .note{max-width:560px;margin:14px auto 0;text-align:center;font-size:14px;line-height:20px;letter-spacing:.04em;color:#A9A39B}
html.wide .steps{padding:20px 0 0}

/* Making room for a keyboard: only where one actually appears (app.js adds .k then), and by sliding, never jumping. */
.s .art,.s .name,.s form,.s.q .lab,.s.q .step,.s.q .qf,.s.q .foot,.s.q .qn{transition:top .32s cubic-bezier(.2,.8,.2,1),bottom .32s cubic-bezier(.2,.8,.2,1)}
.s .sub{transition:opacity .4s,top .32s cubic-bezier(.2,.8,.2,1)}
.s.q canvas{transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
.s.q.k canvas{display:block;transform:translateY(-330px);opacity:0}
.s.q .skip{transition:opacity .2s}
.s.q.k .skip{display:block;opacity:0;pointer-events:none}
.s.q.k .foot{bottom:306px}
.s.q.t .qn{display:block}
@media (prefers-reduced-motion: reduce){.s .art,.s .name,.s .sub,.s form,.s.q .lab,.s.q .step,.s.q .qf,.s.q .foot,.s.q .qn,.s.q canvas,.s.q .skip{transition:none}}