/* Whyzit, the shipped front end.
 *
 * The screens are the four the owner picked from
 * docs/design/whyzit-feed-options.html: Home C, Playing F, Expanded H and
 * Beat late L. C, F and L come from the Bare player. H comes from Chat
 * forward, so the expanded sheet is the chat thread.
 *
 * Every color, shadow, radius and typeface comes from soft-daylight.css.
 * This file adds shape only. It adds no color literal that is not white,
 * black or one of that file's own tokens.
 *
 * Four rulings from the owner are built in here rather than in the mockups:
 *   1. The Playing screen carries no proposal container.
 *   2. Captions sit straight on the picture, in the films' own treatment.
 *      No plate sits behind them.
 *   3. The beat-late message reads "Writing the next part" and nothing more.
 *   4. No screen shows money.
 *
 * The mockups were measured on a 390 by 844 phone that drew its own status
 * bar and home indicator. A real app has neither, so the numbers below sit
 * on the safe-area insets instead. On a browser with no insets the player's
 * bottom stack lands 34 px lower than the mockup, which is the height of
 * the home indicator the mockup was clearing.
 */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* The stage height in pixels, written by app.js on every resize. The
     caption is sized from it, because the films burn their captions at a
     fixed share of an 832 px frame. */
  --stage-h: 844px;

  /* The caption, matched to the films. scripts/iron-video/round2.py draws
     every caption with drawtext at fontsize 28 on the 480 by 832 frame,
     white, shadowcolor black@0.85 offset 2 across and 3 down, centered,
     with the block's bottom 78 px above the frame edge and a line height
     of 1.29. Those five numbers are read off that file and scaled by the
     stage's own height, so the live caption and the film caption are the
     same size on the same glass. */
  --cap-fs: calc(var(--stage-h) * 28 / 832);
  --cap-shadow-x: calc(var(--stage-h) * 2 / 832);
  --cap-shadow-y: calc(var(--stage-h) * 3 / 832);
}

html, body { overscroll-behavior: none; }

/* soft-daylight.css sizes .phone for a mockup frame. A shipped app fills
   the device instead. */
.phone {
  width: 100%;
  height: 100dvh;
  max-width: 100%;
}

.view { position: absolute; inset: 0; display: none; }
html[data-state="home"]     .v-home   { display: flex; flex-direction: column; }
html[data-state="playing"]  .v-player { display: block; }
html[data-state="expanded"] .v-player { display: block; }
html[data-state="late"]     .v-player { display: block; }

/* =========================================================
   HOME. Panel C.
   ========================================================= */

.v-home { background: var(--base); }
.v-home .content {
  padding: calc(var(--safe-top) + 14px) 20px calc(var(--safe-bottom) + 18px);
}

.topbar {
  flex: 0 0 auto; height: 44px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark { margin: 0; }
/* Sign in, and who is signed in. Both sit in the top bar beside the new chat
   button, and only one is ever shown. Google asks that its mark keeps its own
   colors, so the icon is the one place on this screen that does not take a
   token from the stylesheet. */
.signin {
  height: 44px; padding: 0 14px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); box-shadow: var(--sh-card); color: var(--ink);
  font: inherit; font-weight: 600; font-size: 14px;
}
.signin:disabled { opacity: .55; }
/* A display rule beats the hidden attribute, so hidden is restated here. The
   sign out control was visible to signed out visitors without this. */
/* A message that something worked, centred low over the picture so it never
   covers the captions or the rail. */
.toast {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 6; padding: 10px 16px; border-radius: var(--r-sm);
  background: rgba(22, 23, 43, .88); color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  animation: toast-in .16s ease-out;
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }

.who[hidden], .signin[hidden] { display: none; }
.who { display: inline-flex; align-items: center; gap: 10px; }
/* The top bar spreads its two ends apart, so everything on the right travels
   together in one group. */
.topbar-right { display: inline-flex; align-items: center; gap: 8px; }
.whoname {
  font-size: 14px; font-weight: 600; color: var(--ink);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.signout {
  height: 44px; padding: 0 12px; border-radius: var(--r-sm);
  background: none; color: var(--slate); font: inherit; font-size: 14px;
}

.newchat {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); box-shadow: var(--sh-card); color: var(--accent);
}
.v-home .headline { font-size: 33px; margin-bottom: 18px; max-width: 300px; }

.v-home .field { margin-bottom: 14px; padding: 0 8px 0 18px; }
.field .send {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--card); box-shadow: var(--sh-accent);
}
.field .send:disabled { opacity: .45; }

/* The style switch, region 1 of table 2 in the specification. */
.switch { margin-bottom: 14px; }

.chips { flex: 0 0 auto; display: flex; gap: 9px; margin-bottom: 20px; }
.chip {
  flex: 1 1 0; min-width: 0; height: 44px; padding: 0 14px;
  border-radius: var(--r-sm);
  display: block; line-height: 44px; text-align: center;
  background: var(--card); box-shadow: var(--sh-card);
  font-size: 14px; font-weight: 500; letter-spacing: -.006em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.earlier {
  flex: 0 0 auto; margin: 0 0 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}

.chats {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.chats::-webkit-scrollbar { display: none; }
.chat {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 13px; min-height: 74px; padding: 0 15px;
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--sh-card);
  text-align: left;
}
.chat .ct { flex: 1 1 auto; min-width: 0; }
.chat h3 {
  margin: 0 0 3px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat p {
  margin: 0; font-size: 12.5px; font-weight: 500; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.chat .go { flex: 0 0 auto; color: var(--faint); }

.homefail, .playfail {
  margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
}
.homefail:empty, .playfail:empty { display: none; }
.playfail {
  position: absolute; left: 20px; right: 20px; top: calc(var(--safe-top) + 64px);
  z-index: 12; color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(var(--night), .8);
}

/* =========================================================
   PLAYER. Panel F, and panel L for the late state.
   ========================================================= */

.stage {
  position: absolute; inset: 0;
  overflow: hidden;
  background: rgba(var(--night), 1);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.stage.settle { transition: transform .3s cubic-bezier(.22,1.06,.36,1); }

.track {
  position: absolute; left: 0; top: -100%;
  width: 100%; height: 300%;
  will-change: transform;
}
.track.settle { transition: transform .42s cubic-bezier(.22,1.12,.3,1); }

.lesson { position: relative; width: 100%; height: 33.3333%; overflow: hidden; }

.shot { position: absolute; inset: 0; overflow: hidden; background: rgba(var(--night), 1); }

/* A pointer dragged across a picture starts a native media drag, which
   fires pointercancel and kills the swipe. The picture takes no pointer
   events, so the drag stays with the stage. */
.pane, .peek {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity .12s linear;
  transform-origin: 50% 50%;
}
.pane.on, .peek { opacity: 1; }
.peek { transition: none; }

/* The neighbor lessons are dimmed until a drag brings one in. app.js
   raises --near from 0 to 1 while the finger moves. */
.lesson[data-slot="prev"] .shot,
.lesson[data-slot="next"] .shot { filter: brightness(calc(.62 + .38 * var(--near, 0))); }
.lesson[data-slot="prev"] .peek-q,
.lesson[data-slot="next"] .peek-q { opacity: calc(.34 + .66 * var(--near, 0)); }

html[data-state="late"] .lesson[data-slot="cur"] .shot {
  filter: brightness(.72) saturate(.84);
  transition: filter .5s ease;
}

/* The light overlay. Both scrims are built from the caption plate color,
   so the picture stays the brightest thing on screen. */
.scrim-top, .scrim-bot { position: absolute; left: 0; right: 0; pointer-events: none; }
.scrim-top {
  top: 0; height: 138px;
  background: linear-gradient(to bottom, rgba(var(--night), .52), rgba(var(--night), 0));
}
.scrim-bot {
  bottom: 0; height: 330px;
  background: linear-gradient(to top, rgba(var(--night), .74), rgba(var(--night), .26) 46%, rgba(var(--night), 0));
}

/* The recap card's wash. app.js measures the picture under the bullets and
   writes --wash, so the strength is read rather than picked. */
.wash {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(0, 0, 0, var(--wash, 0));
  opacity: 0;
}
html[data-kind="card"] .wash { opacity: 1; }
html[data-kind="card"] .scrim-bot,
html[data-kind="card"] .scrim-top { opacity: 0; }

/* ---------- leaving the player ---------- */

.back {
  position: absolute; left: 6px; top: calc(var(--safe-top) + 12px); z-index: 9;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--card);
  opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
html[data-rail="up"] .back,
html[data-state="late"] .back { opacity: 1; transform: none; pointer-events: auto; }
.back:active { opacity: .62; }
.back svg { filter: drop-shadow(0 1px 3px rgba(var(--night), .7)); }

/* ---------- the time hairline ----------
   One continuous bar scaled on the X axis, the only thing on the player
   that never fades. It reports elapsed time and takes no touches. */
.hair {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--safe-bottom) + 14px);
  height: 2px; z-index: 8;
  background: rgba(255, 255, 255, .22);
  pointer-events: none;
}
.hair i {
  display: block; width: 100%; height: 100%;
  background: var(--accent-tint);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- the question row, and the one control ---------- */

.qrow {
  position: absolute; left: 20px; bottom: calc(var(--safe-bottom) + 28px);
  width: 276px; min-height: 56px;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 10px 8px 0;
  text-align: left; z-index: 7;
}
.qtext {
  flex: 1 1 auto; margin: 0;
  font-family: var(--display);
  font-size: 17px; font-weight: 500; line-height: 1.22; letter-spacing: -.014em;
  color: var(--card);
  text-shadow: 0 1px 3px rgba(var(--night), .7);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.peek-q {
  position: absolute; left: 20px; bottom: calc(var(--safe-bottom) + 36px);
  width: 276px; z-index: 7;
}
.qrow .chev {
  flex: 0 0 auto; margin-bottom: 2px;
  color: rgba(255, 255, 255, .82);
  transition: transform .2s ease;
}
.qrow:active .chev { transform: translateY(-3px); }
.qrow:active .qtext { opacity: .78; }

/* ---------- captions ----------
   White type straight on the picture. No plate. The size, the line
   height, the shadow and the centering are the films' own, scaled from
   the 480 by 832 frame to this stage. */
.cap {
  position: absolute; left: 20px; right: 20px;
  bottom: calc(var(--safe-bottom) + 108px);
  z-index: 6; margin: 0;
  text-align: center;
  font-family: var(--ui);
  font-size: var(--cap-fs);
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-shadow: var(--cap-shadow-x) var(--cap-shadow-y) 0 rgba(0, 0, 0, .85);
  transition: right .24s ease, opacity .2s ease;
  pointer-events: none;
}
html[data-rail="up"] .cap { right: 92px; }
.cap:empty { opacity: 0; }
html[data-state="late"] .cap,
html[data-kind="card"] .cap { display: none; }

/* ---------- the recap card's bullets ----------
   Four at most, each spoken, each appearing on the character time of its
   own first word and staying. The block is bottom anchored and every
   line starts on the same left margin, as the render lays it out. */
.bullets {
  position: absolute; left: 20px; right: 20px;
  bottom: calc(var(--safe-bottom) + 108px);
  z-index: 6; margin: 0; padding: 0; list-style: none;
  display: none; flex-direction: column;
  gap: calc(var(--stage-h) * 10 / 832);
  color: #FFFFFF;
  font-family: var(--ui);
  font-size: var(--cap-fs);
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: -.01em;
  text-shadow: var(--cap-shadow-x) var(--cap-shadow-y) 0 rgba(0, 0, 0, .7);
  pointer-events: none;
}
html[data-kind="card"] .bullets { display: flex; }
.bullets li {
  padding-left: 1.1em; text-indent: -1.1em;
  opacity: 0; transition: opacity .18s linear;
}
.bullets li.on { opacity: 1; }

/* ---------- the stall plate ----------
   The message the owner wrote, and nothing after it. */
.stall {
  position: absolute; left: 20px; right: 92px;
  bottom: calc(var(--safe-bottom) + 108px);
  z-index: 6;
  display: none; align-items: center; gap: 9px;
  padding: 11px 15px;
  border-radius: var(--r-sm);
  background: rgba(var(--night), .76);
  border-top: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 26px -12px rgba(8, 10, 28, .6);
  color: #FFFFFF;
  font-size: 15.5px; font-weight: 600; line-height: 1.34; letter-spacing: -.004em;
  text-shadow: 0 1px 2px rgba(6, 8, 24, .35);
}
html[data-state="late"] .stall,
html[data-waiting="1"] .stall { display: flex; }
.stall .dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-tint);
  animation: breathe 1.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .3; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---------- the rail ---------- */

.rail {
  position: absolute; right: 19px;
  bottom: calc(var(--safe-bottom) + 28px);
  width: 52px; z-index: 9;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
html[data-rail="up"] .rail,
html[data-state="late"] .rail { opacity: 1; transform: none; pointer-events: auto; }

.rbtn {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--card);
  background: rgba(var(--night), .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: transform .16s ease, background .16s ease;
}
.rbtn:active { transform: scale(.9); background: rgba(var(--night), .62); }
.rbtn.primary { background: var(--accent); box-shadow: var(--sh-accent); }
html[data-liked="yes"] .rbtn.like { color: var(--accent-tint); }
html[data-liked="yes"] .rbtn.like svg { fill: var(--accent-tint); }
.rbtn.fav[aria-pressed="true"] { color: var(--accent-tint); }
.rbtn.fav[aria-pressed="true"] svg { fill: var(--accent-tint); }

/* ---------- gesture feedback ---------- */

.flash {
  position: absolute; left: 50%; top: 50%; z-index: 10;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--night), .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--card);
  opacity: 0; transform: scale(.68); pointer-events: none;
}
.flash.go { animation: flashpop .62s ease-out forwards; }
@keyframes flashpop {
  0%   { opacity: 0; transform: scale(.68); }
  18%  { opacity: 1; transform: scale(1); }
  62%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

.burst {
  position: absolute; z-index: 11; width: 108px; height: 108px;
  left: 50%; top: 50%; margin: -54px 0 0 -54px;
  color: var(--accent-tint);
  opacity: 0; pointer-events: none;
}
.burst.go { animation: burstpop .86s cubic-bezier(.2,1.1,.3,1) forwards; }
@keyframes burstpop {
  0%   { opacity: 0; transform: scale(.3) rotate(-14deg); }
  22%  { opacity: 1; transform: scale(1.26) rotate(6deg); }
  48%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.1) translateY(-26px); }
}

/* The seek ripple fills the outer 35 percent that owns the double press,
   so the ripple also teaches the zone. The wash is built from --night,
   because a white wash disappears over the bright core of a picture. */
.seek {
  position: absolute; top: 0; bottom: 0; width: 35%; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  color: var(--card);
  opacity: 0; pointer-events: none;
}
.seek.l {
  left: 0; --nudge: -7px;
  background: radial-gradient(130% 62% at 0% 50%, rgba(var(--night), .42), rgba(var(--night), 0) 74%);
}
.seek.r {
  right: 0; --nudge: 7px;
  background: radial-gradient(130% 62% at 100% 50%, rgba(var(--night), .42), rgba(var(--night), 0) 74%);
}
.seek span {
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(var(--night), .7);
}
.seek.go { animation: seekpop .62s ease-out forwards; }
.seek.go svg { animation: chevnudge .62s ease-out; }
@keyframes seekpop {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  58%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes chevnudge {
  0%, 100% { transform: translateX(0); }
  32%      { transform: translateX(var(--nudge)); }
}

/* =========================================================
   EXPANDED. Panel H, Chat forward's sheet.
   The sheet is the chat thread, and Soft daylight returns in full.
   ========================================================= */

.topbar-player {
  position: absolute; left: 18px; right: 18px;
  top: calc(var(--safe-top) + 10px);
  z-index: 3;
  display: none; align-items: center; gap: 12px;
}
html[data-state="expanded"] .topbar-player { display: flex; }
.roundbtn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(var(--night), .34);
}
.titlewrap { min-width: 0; }
.chattitle {
  font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(var(--night), .7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chatsub {
  margin-top: 2px; font-size: 12.5px; font-weight: 500;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 3px rgba(var(--night), .7);
}

.veil {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(var(--night), .46);
  opacity: 0; visibility: hidden; transition: opacity .18s linear;
}
html[data-state="expanded"] .veil { opacity: 1; visibility: visible; }
html[data-state="expanded"] .rail,
html[data-state="expanded"] .qrow,
html[data-state="expanded"] .cap,
html[data-state="expanded"] .bullets,
html[data-state="expanded"] .hair,
html[data-state="expanded"] .back { opacity: 0; visibility: hidden; }

.sheet {
  position: absolute; left: 0; right: 0; top: 168px; bottom: 0; z-index: 4;
  display: flex; flex-direction: column;
  padding: 0 18px calc(var(--safe-bottom) + 18px);
  background: var(--base);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-stage);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .2s linear, transform .2s ease-out;
}
html[data-state="expanded"] .sheet { opacity: 1; visibility: visible; transform: none; }

.grab { flex: 0 0 auto; width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; }
.grab i { display: block; width: 42px; height: 5px; border-radius: 3px; background: var(--line); }

.sheethead {
  flex: 0 0 auto; min-height: 52px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sheettitle {
  font-family: var(--display);
  font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.sheetsub { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--slate); }

.thread {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 8px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 96%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 96%, transparent 100%);
}
.thread::-webkit-scrollbar { display: none; }

.ask-b {
  align-self: flex-end; max-width: 80%; margin: 0;
  padding: 11px 15px; border-radius: var(--r-md);
  background: var(--accent-tint); color: var(--accent-deep);
  font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.006em;
}
.lcard {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 70px; padding: 11px 13px; text-align: left;
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--sh-card);
}
.lcard.here { background: var(--accent-tint); }
.lbody { flex: 1 1 auto; min-width: 0; }
.ltitle {
  display: block;
  font-family: var(--display);
  font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lmeta {
  margin-top: 4px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.nowchip {
  flex: 0 0 auto; padding: 0 9px; height: 24px; border-radius: 12px;
  display: inline-flex; align-items: center;
  background: var(--card); color: var(--accent-deep);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.lgo { flex: 0 0 auto; color: var(--faint); display: inline-flex; }

.dock { flex: 0 0 auto; }
.dock .field { margin-bottom: 0; height: 58px; padding: 0 8px 0 16px; }
.dock .send { width: 44px; height: 44px; }