/* onboard.css: the onboarding prototype's look (ob-screens, 25 Oct 2026).
   Look rules: BRIEF-R5 "Look" and kit-r5/jade.css v2 (linked before this file): paper #F9FAFC is the page, white objects on it,
   ink #0B0B12, SF Pro upright for Orqa and people, New York for the stories, no italics, no tab bar, jade only as a mark.
   Glass is only what rises off the paper (the To field, the peek card). Motion: transform and opacity only, 280 ms,
   cubic-bezier(.2,.9,.25,1) (the phone app's curve). No shimmer, no skeleton, no spinner, ever. */

/* No local font file is served (Apple's licence): ui-serif is New York on iPhone; a Mac render falls back to the system serif. */

:root{
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --strip-h:92px;
  --curve:cubic-bezier(.2,.9,.25,1);
  --shadow-lift:0 14px 36px -10px rgba(11,11,18,.28),0 2px 6px rgba(11,11,18,.06);
  --shadow-cut:0 1px 2px rgba(7,6,62,.04),0 6px 16px -10px rgba(7,6,62,.18);
  --torn:polygon(0 0,100% 0,100% 98.5%,96% 99.1%,89% 98.7%,83% 99.6%,77% 99%,70% 99.7%,63% 99.1%,55% 100%,48% 99.2%,41% 99.8%,33% 99%,26% 99.5%,19% 98.8%,11% 99.4%,5% 98.9%,0 99.5%);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html.still *{transition:none!important;animation:none!important}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font:17px/22px var(--sans);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
img{display:block}
#probe{position:fixed;top:0;left:0;width:1px;height:var(--sat);visibility:hidden;pointer-events:none}

/* ---------- the stage: one centred phone column, scenes pushed inside it ---------- */
#stage{position:fixed;top:0;bottom:0;left:50%;width:min(100vw,440px);transform:translateX(-50%);overflow:hidden;background:var(--paper)}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper);will-change:transform,opacity}
.scr .body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:calc(var(--sat) + 14px) 16px calc(var(--strip-h) + var(--sab) + 20px)}
.scr .body::-webkit-scrollbar{display:none}
.scr.no-strip .body{padding-bottom:calc(var(--sab) + 28px)}
.scr .veil{position:absolute;inset:0;z-index:40;background:var(--ink);opacity:0;pointer-events:none;transition:opacity 160ms ease}
.scr .veil.is-on{opacity:.4;pointer-events:auto}
.scr .dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}

/* the title block: Orqa's voice, SF Pro upright */
.head{margin:8px 2px 16px}
.head h1{margin:0;font:600 20px/26px var(--sans);letter-spacing:-.01em}
.head p{margin:4px 0 0;font:400 16px/22px var(--sans);color:var(--ink)}
.head p.quiet{color:var(--muted);font-size:15px;line-height:20px}

/* ---------- the clipping card (the clippings kit's rule: white cut on paper, a torn foot) ---------- */
.card{position:relative;display:block;width:100%;background:var(--object);clip-path:var(--torn);padding:12px 13px 16px;
  text-align:left;transform-origin:50% 50%;transition:transform 180ms var(--curve),opacity 180ms ease;touch-action:pan-y}
.card .pic{aspect-ratio:3/2;object-fit:cover;background:transparent;margin:-12px -13px 10px;width:calc(100% + 26px)} /* an unloaded picture is blank paper, never a grey block */
.card .pic.tall{aspect-ratio:4/3}
.card h2{margin:0;font:400 20px/26px var(--serif);letter-spacing:-.25px;overflow-wrap:anywhere}
.card .meta{margin:5px 0 0;font:400 12px/16px var(--sans);color:var(--muted)}
.card .one{margin:6px 0 0;font:400 15px/20px var(--sans);color:var(--muted)}
.card .tag{display:block;margin:0 0 6px;font:600 13px/16px var(--sans);color:var(--ink)}
.card .photo{position:relative;margin:-12px -13px 10px}
.card .photo .pic{margin:0;width:100%}
.credit{position:absolute;right:4px;bottom:4px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
.credit svg{width:25px;height:25px;background:#ffffffeb;border-radius:50%;padding:5px;box-shadow:0 1px 5px #0b0b1226}
.credit-caption{display:block;margin:7px 0 0;font:400 11px/14px var(--sans);color:var(--muted)}
.credit-caption[hidden]{display:none}
.credit-caption b{font-weight:600}.credit-caption i{font-style:normal}
.card .photo+.credit-caption{margin:-4px 0 10px}
.card .mark{position:absolute;top:10px;right:10px;width:12px;height:12px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 2px var(--object);
  opacity:0;transform:scale(.5);transition:transform 180ms var(--curve),opacity 120ms ease}
.card.is-picked .mark{opacity:1;transform:none}
/* a cut's shadow lives on a wrapper, since clip-path cuts a card's own shadow */
.cut{position:relative;filter:drop-shadow(0 2px 3px rgba(7,6,62,.08));transition:transform 180ms var(--curve),opacity 180ms ease;transform-origin:50% 50%}
.cut.is-up{transform:scale(1.02);filter:drop-shadow(0 12px 18px rgba(11,11,18,.18)) drop-shadow(0 2px 3px rgba(7,6,62,.08));z-index:2}
.cut.is-down{opacity:.6}
.cut.is-held{transform:scale(1.03);filter:drop-shadow(0 16px 24px rgba(11,11,18,.26)) drop-shadow(0 2px 3px rgba(7,6,62,.08));z-index:50}
.cut.is-held .card{touch-action:none}
.cut.is-pressing .card{opacity:.92}
.committed .card{pointer-events:none}

/* S1 three of six: two columns */
.six{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;align-items:start}
.six .card h2{font-size:17px;line-height:22px}
.six .card .one{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.six .cut.is-picked{transform:scale(1.02);filter:drop-shadow(0 10px 16px rgba(11,11,18,.16)) drop-shadow(0 2px 3px rgba(7,6,62,.08));z-index:2}

/* S2–S5 pairs: two cards stacked */
.pair{display:flex;flex-direction:column;gap:14px}
.pair .cut{transform-origin:50% 50%}
.pair .card{padding:14px 15px 18px}

/* S6 six from further out: six smaller cards */
.hold6{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;align-items:start}
.hold6 .card{padding:11px 12px 15px;touch-action:none}
.hold6 .card h2{font-size:16px;line-height:21px}
.hold6 .card .pic{aspect-ratio:3/2}
/* the glass To field, above the thumb */
.to{position:relative;z-index:60;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:44px;margin:12px 0 0;padding:8px 0 0;border-top:1px solid var(--rule);
  background:var(--object);opacity:0;transform:translateY(6px);transition:transform 220ms var(--curve),opacity 160ms ease}
.to.is-on{opacity:1;transform:none}
.to label{font:600 13px/16px var(--sans);color:var(--muted)}
.to input{flex:1;min-width:90px;border:0;background:transparent;outline:none;font:400 17px/22px var(--sans);color:var(--ink);padding:0;margin:0;-webkit-user-select:text;user-select:text}
.to input::placeholder{color:transparent}
.to .done{height:36px;padding:0 12px;border-radius:18px;font:600 15px/20px var(--sans);color:var(--jade-text)}
.to .done[disabled]{color:var(--rule)}

/* S7 the scene */
.scene p.q{margin:0 2px 18px;font:400 20px/27px var(--sans);letter-spacing:-.01em}
.scene .ends{display:flex;flex-direction:column;gap:12px}
.scene .card{padding:13px 15px 17px}
.scene .card h2{font-size:18px;line-height:24px}

/* S9 the reveal */
.reveal .card{padding:16px 16px 20px}
.reveal h1{margin:0 0 14px;font:600 20px/26px var(--sans)}
.reveal .ln{display:flex;flex-wrap:wrap;gap:0 6px;margin:0;padding:11px 0;border-top:1px solid var(--rule);font:400 17px/24px var(--sans)}
.reveal .ln.plain{color:var(--muted)}
.reveal .ln button{display:inline;font:inherit;color:inherit;line-height:inherit;padding:2px 0;transition:color 120ms ease;min-height:0}
.reveal .ln button.is-struck{text-decoration:line-through;color:var(--muted)}
.reveal .ln .dot{color:var(--muted)}
.verbs{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 2px 0}
.verb{font:600 17px/22px var(--sans);color:var(--jade-text);min-height:44px;padding:11px 0}
.verb.quiet{color:var(--muted);font-weight:400}

/* S10 the first send */
.send .card{padding:14px 15px 18px}
.send .para{position:relative;margin:14px 0 0;font:400 16px/24px var(--serif);color:var(--ink)}
.send .para .tag{margin-bottom:4px}
.send .para .tx{background:var(--own-mark);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 0;box-shadow:2px 0 var(--own-mark),-1px 0 var(--own-mark)}
.send .for{margin:16px 0 0;font:600 13px/16px var(--sans)}

/* S11 the paper */
.paper .date{margin:8px 2px 18px;font:600 20px/26px var(--sans)}
.paper .cut{margin:0 0 18px;filter:drop-shadow(0 3px 4px rgba(7,6,62,.06));transform:rotate(var(--twist,-.5deg))}
.paper .cut:nth-child(even){--twist:.5deg}
.paper .card{padding:13px 14px 18px}
.paper .card .pic{aspect-ratio:3/2}
.paper .card.nopic{padding-top:14px}
.paper .end{margin:28px 2px 0;padding-top:16px;border-top:1px solid var(--rule);font:400 15px/20px var(--sans);color:var(--muted)}

/* ---------- the strip: 92 pt at the bottom, the date and ten small cards ---------- */
#strip{position:fixed;left:50%;bottom:0;width:min(100vw,440px);transform:translateX(-50%);z-index:30;background:var(--paper);
  height:auto;min-height:calc(21px + var(--sab));max-height:calc(var(--strip-h) + var(--sab));padding:5px 16px var(--sab);border-top:1px solid var(--rule);touch-action:none; /* grows with its rows, from the date line alone */
  transition:transform 280ms var(--curve),opacity 200ms ease}
#strip.is-off{transform:translate(-50%,calc(var(--strip-h) + var(--sab) + 2px));opacity:0;pointer-events:none}
#strip .sh{display:flex;justify-content:space-between;align-items:baseline;height:16px;font:600 12px/16px var(--sans);color:var(--ink)}
#strip .sh small{font:400 11px/16px var(--sans);color:var(--muted)}
#strip .tiles{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:34px;gap:3px 5px;margin-top:4px}
.tile{position:relative;height:34px;padding:1px 5px;border-radius:3px;background:var(--object);box-shadow:0 0 0 .5px var(--rule);overflow:hidden;
  font:400 12px/16px var(--serif);color:var(--ink);will-change:transform,opacity;transform-origin:50% 50%}
.tile .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.1px}
.tile .f{display:block;font:600 10px/13px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.has-f .t{-webkit-line-clamp:1;line-height:17px}
.tile.is-blank{background:var(--object);box-shadow:0 0 0 .5px var(--rule);opacity:.6}
.tile[data-state="inferred"]{color:var(--muted)}
.tile[data-state="picked"]{color:var(--ink)}
.tile.ghost{position:absolute;pointer-events:none;z-index:2}
.tile.is-new{box-shadow:0 0 0 .5px var(--rule),inset 0 -2px 0 var(--jade)}

/* the whole paper, pulled up from the strip (S8) */
#sheetScrim{position:fixed;inset:0;z-index:48;background:rgba(11,11,18,.4);opacity:0;pointer-events:none;transition:opacity 220ms ease}
#sheetScrim.is-on{opacity:1;pointer-events:auto}
#sheet{position:fixed;left:50%;bottom:0;width:min(100vw,440px);z-index:49;transform:translate(-50%,104%);transition:transform 320ms var(--curve);
  background:var(--paper);border-radius:14px 14px 0 0;box-shadow:0 -8px 30px -10px rgba(11,11,18,.22);max-height:calc(100% - var(--sat) - 24px);
  display:flex;flex-direction:column;padding:8px 0 calc(var(--sab) + 8px)}
#sheet.is-on{transform:translate(-50%,0)}
#sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--rule);margin:0 auto 10px;flex:none}
#sheet .sd{padding:0 20px 10px;font:600 20px/26px var(--sans);flex:none}
#sheet .rows{overflow-y:auto;overscroll-behavior:contain;padding:0 20px;flex:1;min-height:0}
#sheet .row{display:block;padding:12px 0;border-top:1px solid var(--rule)}
#sheet .row:first-child{border-top:0}
#sheet .row h3{margin:0;font:400 17px/22px var(--serif)}
#sheet .row .meta{margin:3px 0 0;font:400 12px/16px var(--sans);color:var(--muted)}
#sheet .row .tag{display:block;margin:0 0 3px;font:600 13px/16px var(--sans)}
#sheet .row.blank{height:52px}

/* ---------- the reader (reader.html) ---------- */
.rd{position:fixed;inset:0;left:50%;width:min(100vw,440px);transform:translateX(-50%);background:var(--paper);display:flex;flex-direction:column}
.rd .top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 6px) 12px 6px;font:600 13px/16px var(--sans);color:var(--muted)}
.rd .top button,.rd .top a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;font:400 17px/22px var(--sans);color:var(--jade-text)}
.rd .top .back::before{content:'‹';font-size:26px;line-height:22px;margin-right:6px;position:relative;top:-1px}
.rd .scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 24px calc(var(--sab) + 60px);position:relative}
.rd .source{font:400 12px/16px var(--sans);color:var(--muted)}
.rd h1{margin:8px 0 12px;font:600 20px/26px var(--serif);letter-spacing:-.25px}
.rd figure{margin:0 -24px 14px;position:relative}
.rd figure img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#E9EBF0}
.rd figure figcaption{padding:6px 24px 0;font:400 11px/14px var(--sans);color:var(--muted)}
.rd figure .photo{position:relative}
.rd figure .photo img{display:block}
.rd .line{position:relative;margin:0 0 19px;transition:transform 180ms cubic-bezier(.2,.8,.2,1)}
.rd .line::after{content:'';position:absolute;inset:-10px -12px;border-radius:10px;box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:opacity 180ms ease;background:var(--paper);z-index:-1}
.rd .line.is-held{transform:scale(1.02);z-index:50}
.rd .line.is-held::after{opacity:1}
.rd .line p{margin:0;font:400 16px/24px var(--serif)}
.rd .line.orqa p{font:400 16px/22px var(--sans);color:var(--ink)}
.rd .line .who{display:block;font:600 13px/16px var(--sans);color:var(--muted);margin-bottom:4px}
.rd .chip{text-decoration:underline dotted rgba(105,107,118,.4);text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.rd .chip.is-pressing{text-decoration-style:solid;text-decoration-color:var(--muted)}
.rd .react{position:absolute;right:-8px;top:-21px;z-index:3;display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:14px;background:var(--object);
  border:1px solid var(--rule);box-shadow:0 2px 8px rgba(11,11,18,.1);font:16px/1 var(--sans);transform-origin:80% 100%}
.rd .said{margin:10px 0 0;padding:10px 12px;background:var(--object);border-left:3px solid var(--own-mark);font:400 16px/22px var(--sans);white-space:pre-wrap;overflow-wrap:anywhere}
.rd .say{margin-top:10px;background:var(--object);border:1px solid var(--rule);border-radius:8px;padding:10px 12px}
.rd .say textarea{width:100%;min-height:60px;border:0;background:transparent;outline:none;resize:none;font:400 16px/22px var(--sans);color:var(--ink);padding:0;-webkit-user-select:text;user-select:text}
.rd .say div{display:flex;justify-content:flex-end;gap:18px}
.rd .say button{font:600 15px/20px var(--sans);color:var(--jade-text);min-height:40px}
.rd .say button.q{color:var(--muted);font-weight:400}
.rd .rest{display:block;margin:6px 0 0;padding:12px 0;font:400 15px/20px var(--sans);color:var(--jade-text);min-height:44px}
.rd .ending{margin-top:28px;padding-top:16px;border-top:1px solid var(--rule);font:400 13px/18px var(--sans);color:var(--muted)}
.rd .veil{position:absolute;inset:0;z-index:40;background:rgba(11,11,18,.4);opacity:0;pointer-events:none;transition:opacity 160ms ease}
.rd .veil.is-on{opacity:1;pointer-events:auto}
/* the reaction pill and the peek card: glass, anchored to the word */
.pill{position:absolute;z-index:60;display:flex;align-items:center;height:48px;padding:0 6px;border-radius:24px;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(221,224,231,.8);box-shadow:0 10px 30px -6px rgba(11,11,18,.28);
  opacity:0;transform:scale(.7) translateY(8px);transition:transform 220ms cubic-bezier(.2,.9,.3,1.15),opacity 160ms ease}
.pill.is-below{transform:scale(.7) translateY(-8px)}.pill.is-on{opacity:1;transform:none}
.pill>button{width:42px;height:42px;border-radius:50%;font:22px/1 var(--sans);display:grid;place-items:center}
.pill>button.is-current{background:#EEF0F4}
.pill>.sayb{position:relative;width:auto;border-radius:21px;padding:0 12px 0 16px;margin-left:4px;font:600 13px/16px var(--sans);color:var(--jade-text);white-space:nowrap}
.pill>.sayb::before{content:'';position:absolute;left:0;top:11px;bottom:11px;width:1px;background:var(--rule)}
.peek{position:absolute;z-index:60;width:300px;max-width:calc(100% - 24px);padding:14px 16px 16px;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(221,224,231,.8);border-radius:16px;
  box-shadow:0 18px 44px -12px rgba(11,11,18,.35),0 2px 8px rgba(11,11,18,.06);font:16px/22px var(--sans);color:var(--ink);
  opacity:0;transform:scale(.6) translateY(10px);transition:transform 250ms cubic-bezier(.2,.9,.3,1.1),opacity 180ms ease}
.peek.is-below{transform:scale(.6) translateY(-10px)}.peek.is-on{opacity:1;transform:none}
.peek .ph{display:flex;gap:10px;align-items:center}
.peek .logo{position:relative;overflow:hidden;width:32px;height:32px;border-radius:8px;background:var(--jade-tint);color:var(--jade-text);display:grid;place-items:center;font:600 11px/1 var(--sans);letter-spacing:.02em;flex:none}
.peek .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek .ph>div{min-width:0}
.peek .ph strong{display:block;font:600 15px/20px var(--sans)}
.peek .ph small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 12px/16px var(--sans);color:var(--muted);margin-top:1px}
.peek .brief{margin-top:10px}
.peek .brief p{margin:0;font:400 14px/20px var(--sans);color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.peek .brief small{display:block;margin-top:3px;font:400 11px/16px var(--sans);color:var(--muted)}
.peek .week{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font:400 13px/16px var(--sans);color:var(--muted)}
.peek .spark{display:flex;align-items:flex-end;gap:3px;height:14px;width:46px;flex:none}
.peek .spark i{flex:1;background:#C9CCD4;border-radius:1px}
.peek .spark i:last-child{background:var(--jade)}
.peek .links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.peek .links span{font:400 12px/16px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:4px 9px}
.peek .latest{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}
.peek .latest small{display:block;font:600 11px/16px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.peek .latest strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 14px/19px var(--serif);margin-top:4px}
.peek .latest span{display:block;font:400 12px/16px var(--sans);color:var(--muted);margin-top:4px}
.peek .live{display:block;text-align:right;font:400 11px/16px var(--sans);color:var(--muted);margin-top:8px}

@media (prefers-reduced-motion:reduce){.scr,.cut,.card,.tile,.to,.pill,.peek,#sheet,#strip{transition:none!important}}

/* Azure unit 2: phone-ready holds, sources and the forming paper. */
button,a{touch-action:manipulation}
input,textarea{-webkit-touch-callout:default}
.hold6 .card{touch-action:pan-y}
.hold6.is-single{grid-template-columns:1fr}
.card .para{margin:14px 0 0;font:400 16px/24px var(--serif)}
.card .para .tag{margin-bottom:4px}
.card .para .tx{background:var(--own-mark);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.card .reason{margin:6px 0 0;font:600 13px/16px var(--sans);color:var(--muted)}
.thumb-point{position:absolute;z-index:65;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.65);border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 9px rgba(255,255,255,.18);pointer-events:none}
#sheet .row[data-state="inferred"] h3{color:var(--muted)}
.reveal .learned{font:400 12px/16px var(--sans);color:var(--muted);align-self:center;margin-right:8px}
.pill{max-width:calc(100% - 24px)}
.pill>button{width:40px;flex-shrink:0}
.pill>.sayb{padding:0 12px;width:auto}

.to{pointer-events:none}.to.is-on{pointer-events:auto}
.pill{padding:0 4px}.pill>.sayb{padding:0 8px;margin-left:0}
.pill,.peek{pointer-events:none}.pill.is-on,.peek.is-on{pointer-events:auto}

/* ---------- the site's send (send.js): the field below a lifted paragraph, on solid paper ---------- */
.sendf{position:relative;z-index:60;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:12px 0 0;padding:10px 0 2px;border-top:1px solid var(--rule);background:var(--object);font:400 17px/22px var(--sans);color:var(--ink)} /* above the veil, with the lifted paragraph; -webkit-overflow-scrolling is gone from the scrollers so no scroller traps it under the veil */
.sendf label{font:600 13px/16px var(--sans);color:var(--muted)}
.sendf .val{font:400 17px/22px var(--sans)}
.sendf input{flex:1;min-width:110px;border:0;background:transparent;outline:none;font:400 17px/22px var(--sans);color:var(--ink);padding:6px 0;margin:0;-webkit-user-select:text;user-select:text;border-bottom:1px solid var(--rule)}
.sendf input:focus{border-bottom-color:var(--jade-text)}
.sendf input::placeholder{color:var(--rule)}
.sendf .done{height:40px;padding:0 10px;font:600 15px/20px var(--sans);color:var(--jade-text)}
.sendf .done[disabled]{color:var(--rule)}
.sendf .quit{height:40px;padding:0 6px;font:400 15px/20px var(--sans);color:var(--muted)}
.sendf .err{flex-basis:100%;margin:0;font:400 12px/16px var(--sans);color:var(--muted)}
.sendf.is-busy{opacity:.7}
.share-line{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 0 0;border-top:1px solid var(--rule)}
.share-line input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:400 14px/20px var(--sans);color:var(--jade-text);padding:6px 0;-webkit-user-select:text;user-select:text}
.share-line .copy{height:40px;padding:0 10px;font:600 15px/20px var(--sans);color:var(--jade-text)}
.to-line{display:flex;align-items:center;gap:8px;margin:8px 0 0;font:600 13px/16px var(--sans);color:var(--ink);min-height:36px}
.to-line .initial{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ECEEF2;color:#535761;font:600 10px/1 var(--sans)}
.to-line a{color:var(--jade-text);margin-left:auto;font-weight:400}
.rd .line.is-sending{z-index:50;transform:none}
.rd .line.is-sending>p{background:var(--own-mark);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.paper .cut.is-sending{z-index:50;transform:none;filter:drop-shadow(0 16px 24px rgba(11,11,18,.26)) drop-shadow(0 2px 3px rgba(7,6,62,.08))}
.paper .card .para{display:none}
.paper .cut.is-sending .card .para{display:block}
/* the sent line under the meta (the reader's To line); the green dot is gone */
.card .sent-lines{margin:6px 0 0}
.card .sent-lines .to-line{margin:0;min-height:28px}
.card .sent-lines .go{color:var(--jade-text);margin-left:auto;font-weight:400}
.paper .end small{display:block;margin-top:6px;font:400 12px/16px var(--sans);color:var(--muted)}

/* the margin (reader.html): what came back on a sent paragraph, the receiver's reaction and the first words of their note, signed with their initial */
.rd .came{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 8px;margin:7px 0 0;font:400 13px/16px var(--sans);color:var(--ink)}
.rd .came .initial{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ECEEF2;color:#535761;font:600 10px/1 var(--sans);flex:none}
.rd .came .came-react{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 8px;border-radius:16px;background:var(--object);box-shadow:0 1px 3px rgba(7,6,62,.08);font:16px/1 var(--sans)}
.rd .came .came-note{display:inline-flex;align-items:flex-start;gap:6px;max-width:100%;min-width:0;text-align:left}
.rd .came .came-note .initial{margin-top:-2px}
.rd .came .came-note .w{white-space:normal;overflow-wrap:anywhere}

/* S1's foot verb and the two quiet words under a pair (no forced counts, 25 Oct) */
.six-scr .verbs{position:absolute;left:0;right:0;bottom:var(--strip-now,calc(var(--strip-h) + var(--sab)));z-index:35;margin:0;padding:6px 18px 8px;background:var(--paper);box-shadow:0 -10px 12px -8px rgba(7,6,62,.06)} /* pinned just above the strip, always visible */
.six-scr .body{padding-bottom:calc(var(--strip-h) + var(--sab) + 76px)}
.six-scr .verbs .verb[data-verb=done]{color:var(--jade-text);font-weight:600}
.pair-verbs{justify-content:center;gap:10px;margin-top:14px}
.pair-verbs .dot{color:var(--muted)}
.verb:disabled{opacity:.5}