/* landing.css: the signed-out landing page (docs/DESIGN.md section 10, SPEC_V1 6.2).
   It sits on style.css, which holds the faces, the tokens and the app's own components; this
   file adds the page around them and the frame the recorded run plays in. Every colour,
   size and duration is a token of style.css, except the page's own measures, which are
   declared once on `.landing` and used below. Nothing here moves by itself: the page has no
   animation of its own and the frame moves only when the visitor presses something. */

.landing {
  --nav-h: 72px;
  --demo-w: 1040px;
  --demo-h: 640px;
  --card-w: 440px;
  --hero-w: 880px;
  --sub-w: 560px;
  --page-w: 1120px;
  --demo-side: 288px;
  --safe-top: 0px;
  display: flex; flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  padding-inline: var(--pad-l) var(--pad-r);
}
html { scroll-padding-top: var(--s-6); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ------------------------------------------------------------------ nav */

.lnav {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--page-w); height: var(--nav-h);
  margin-inline: auto;
}
.lnav__lockup .mark { width: var(--mark-home); height: var(--mark-home); }
.lnav__lockup .lockup__word { font-size: var(--t-heading); }
.lnav__in { text-decoration: none; }

/* ----------------------------------------------------------------- hero */

.lmain { flex: 1 0 auto; width: 100%; max-width: var(--page-w); margin-inline: auto; }
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: var(--s-9);
}
.hero__chip { max-width: 100%; white-space: normal; text-align: center; padding-block: var(--s-1); cursor: default; }
.hero__title {
  max-width: var(--hero-w); margin-top: var(--s-6);
  font-size: var(--t-hero); line-height: var(--lh-hero);
  text-wrap: balance;
}
.hero__sub {
  max-width: var(--sub-w); margin-top: var(--s-4);
  font-size: var(--t-heading); line-height: var(--lh-heading); color: var(--text-2);
  text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-7); }
.hero__actions .link { text-decoration: none; color: var(--text); }

/* ------------------------------------------------------------- the demo */

.demo { margin-top: var(--s-10); }
.demo__stage { display: flow-root; position: relative; max-width: var(--demo-w); margin-inline: auto; }
/* The chip is the first thing in the stage, a tab on the frame's top edge at its left corner. It
   sticks there for as long as any part of the stage is on screen: the frame is never shown
   without its label. */
.demo__chip {
  position: sticky; top: var(--s-3); z-index: var(--z-latest);
  width: max-content; max-width: calc(100% - 2 * var(--s-4));
  margin: 0 0 calc(-1 * var(--s-3)) var(--s-4);
  background: var(--surface-raised);
  border: 1px dashed var(--line-strong);
  color: var(--text-2);
  white-space: normal;
  cursor: default;
}
.demo__frame {
  --safe-top: 0px; --safe-bottom: 0px; --safe-left: 0px; --safe-right: 0px;
  --main-l: 0px; --main-r: 0px; --bottom-stack: 0px;
  position: relative;
  container: demo / inline-size;
  height: var(--demo-h);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.demo__frame .shell { display: grid; grid-template-columns: var(--demo-side) minmax(0, 1fr); height: 100%; min-height: 0; }
.demo__frame .demo__side { position: static; transform: none; visibility: visible; width: auto; height: 100%; padding: 0; align-self: stretch; overflow: hidden; }
.demo__frame .side__collapse, .demo__frame .side__close, .demo__frame .topbar__menu, .demo__frame .scrim { display: none; }
.demo__frame .main { height: 100%; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.demo__frame .topbar { position: sticky; top: 0; height: var(--topbar-h); padding-top: 0; background: var(--surface-sunk); border-bottom: 1px dashed var(--line-strong); }
.demo__frame .topbar__in { grid-template-columns: auto minmax(0, 1fr) auto; }
.demo__frame .topbar__l { margin-inline-start: 0; }
.demo__frame .topbar__c { justify-content: flex-start; }
.demo__frame .is-home .topbar__lockup { display: none; }
.demo__frame .col--you { padding-inline: var(--pad-l) var(--pad-r); }
.demo__frame .dock { position: sticky; left: auto; right: auto; bottom: 0; padding: 0 0 var(--dock-gap); }
.demo__frame .you { padding-bottom: var(--s-6); }
.demo__frame .sheet { max-height: calc(var(--demo-h) - var(--topbar-h) - var(--keep-visible) - var(--dock-gap)); }
.demo__frame .composer[hidden] { display: none; }
/* The sidebar and the top bar are for show: nothing in them answers. */
.demo__frame .demo__side *, .demo__frame .demo__top * { pointer-events: none; }
.demo__frame .row:hover, .demo__frame .acct__who:hover { background: none; }
.demo__frame .row.is-selected:hover { background: var(--selected); }

/* A frame too narrow for its sidebar (a phone, a small window) shows the intent column alone. */
@container demo (max-width: 819px) {
  .demo__frame .shell { grid-template-columns: minmax(0, 1fr); }
  .demo__frame .demo__side { display: none; }
  .demo__frame .col--you { padding-inline: var(--s-3); }
}
@media (max-width: 639.98px) {
  .landing { --demo-h: 600px; }
}
.demo[data-state="rest"] .demo__frame .composer__send:not(:disabled) { cursor: pointer; }

.demo__caption {
  max-width: var(--demo-w); margin: var(--s-4) auto 0;
  font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--text-3);
  text-align: center; text-wrap: balance;
}
.demo__again { display: flex; justify-content: center; min-height: var(--tap); }
.demo__again .link { color: var(--text-2); }

/* ------------------------------------------------------- the three rules */

.rules { margin-top: var(--s-11); }
.rules__title { font-size: var(--t-display); line-height: var(--lh-display); }
.rules__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin-top: var(--s-7); }
.rule { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.rule__n { font-size: var(--t-title); line-height: var(--lh-title); color: var(--text-3); }
.rule__head { margin-top: var(--s-2); font-size: var(--t-heading); line-height: var(--lh-heading); font-weight: var(--w-strong); text-wrap: balance; }
.rule__body { margin-top: var(--s-2); font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-2); text-wrap: pretty; }
@media (min-width: 960px) {
  .rules__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-9); }
}

/* ---------------------------------------------------------- the sign-in card */

.signin {
  width: 100%; max-width: var(--card-w);
  margin: var(--s-11) auto 0;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { .signin { padding: var(--s-7); } }
.signin__title { font-size: var(--t-title); line-height: var(--lh-title); }
.btn--google { display: flex; width: 100%; gap: var(--s-3); margin-top: var(--s-5); text-decoration: none; }
.signin__g { width: var(--icon); height: var(--icon); flex: none; }
.btn--google:disabled .signin__g { opacity: 0.38; }
.signin__note { margin-top: var(--s-4); font-size: var(--t-ui); line-height: var(--lh-ui); color: var(--text-2); text-wrap: pretty; }
.signin[data-state="soon"] .signin__note { text-align: center; }

/* ----------------------------------------------------------------- footer */

.lfoot {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  width: 100%; max-width: var(--page-w); margin: var(--s-11) auto 0; padding-bottom: var(--s-9);
  font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--text-3); text-align: center;
}
.lfoot a { color: var(--text-3); text-underline-offset: var(--hairline-2); }
.lfoot__brand { font-weight: var(--w-strong); }
.lfoot__lang { display: flex; align-items: center; }
.link--lang { color: var(--text-3); font-size: var(--t-meta); line-height: var(--lh-meta); min-height: var(--tap); }
.link--lang[aria-current="true"] { color: var(--text); font-weight: var(--w-strong); }
.lfoot__loop { max-width: var(--sub-w); margin-top: var(--s-2); text-wrap: balance; }

/* ------------------------------------------------------------ no script */

.noscript { padding: var(--s-9) var(--pad-l) 0; }
.noscript__title { padding-inline: var(--pad-l); margin-top: var(--s-4); font-size: var(--t-display); line-height: var(--lh-display); }
.noscript__note { padding-inline: var(--pad-l); margin-top: var(--s-2); color: var(--text-2); }

/* Laptop: the hero opens up. */
@media (min-width: 1024px) {
  .hero { padding-top: var(--s-12); }
  .demo { margin-top: var(--s-11); }
}