/* Aviso — waitlist page (2026-10-16). Light or dark, following the device,
   with a toggle (index.html). Left: the blue-A
   wordmark, the tagline under it, the sign-up. Right: the interactive text
   demo (thread.css). The diagonal, photos and mascot of earlier
   versions are gone; see git history for them. */

/* Dark mode: tokens.css redefines the text, hairline and button colours under
   [data-theme="dark"]; the page ground is set here. Same black as
   app.aviso.report. */
[data-theme="dark"]{--paper:#0A0A0A;--canvas:#0A0A0A}

html,body{height:100%}
body{background:var(--paper)}
[data-theme="dark"] body{background:var(--paper)}

.hero{
  min-height:100vh;min-height:100dvh;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);   /* 50/50 (Evan, 2026-10-16) */
}

/* ---- right pane: the interactive text demo (thread.css) --------------- */
.pane-thread{
  grid-column:2;
  position:sticky;top:0;
  height:100vh;height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:0 min(clamp(28px,4.5vw,96px),8dvh) 0 0;   /* full height: texts rise from the bottom edge to the top */
}
.pane-thread .thread{max-width:560px;height:100%}
.pane-thread .thread-try{padding-bottom:clamp(24px,3vw,44px)}

/* ---- left pane: content --------------------------------------------- */
.pane-left{
  position:relative;z-index:1;
  grid-column:1;
  display:flex;flex-direction:column;
  padding:min(clamp(36px,3.2vw,60px),6.6dvh) clamp(24px,5.2vw,104px) min(clamp(32px,2.8vw,52px),5.8dvh);
  max-width:none;
}

.content{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-right:min(48px,6dvh);           /* keeps text off the thread */
  /* one width, shared by the wordmark and the line under it, so they stay
     flush at both ends at every viewport */
  --mark-w:min(100%, clamp(374px, 37.4vw, 633px), 66dvh);   /* smaller, then +15%, then +25% (Evan, 2026-10-16) */
}

/* Wordmark is the title — sits at the top of the content block, flush left
   with the text below it. The asset is trimmed to its artwork, so the box edge
   IS the glyph edge and no optical correction is needed.
   Its width is shared with the tagline (--mark-w). */
.logo{
  display:block;position:relative;
  width:var(--mark-w);
  max-width:none;
  aspect-ratio:1836/393;
  margin:0 0 min(clamp(22px,2.2vw,36px),4dvh);
}
.mark{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:left center;
}
.mark-white{display:none}
[data-theme="dark"] .mark-black{display:none}
[data-theme="dark"] .mark-white{display:block}

/* ---- bottom left: light/dark toggle, the demo note, privacy --------------- */
.foot{
  position:fixed;z-index:10;
  left:clamp(14px,1.6vw,24px);bottom:calc(env(safe-area-inset-bottom) + clamp(12px,1.6vw,20px));
  display:flex;align-items:center;gap:10px;
}
.foot-text{margin:0;font-size:12px;line-height:1.35;color:color-mix(in srgb,var(--text-3) 70%,transparent)}
.foot-text a{color:inherit}
.foot-text a:hover{color:var(--text-2)}

/* the privacy pop-up (index.html): a scrolling box over a dark backdrop */
.policy{
  width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:16px;border:0;
  background:transparent;display:none;place-items:center;
}
.policy[open]{display:grid}
.policy::backdrop{background:rgba(0,0,0,.55)}
.policy-box{
  position:relative;width:min(560px,100%);max-height:min(80dvh,720px);
  display:flex;flex-direction:column;
  background:var(--paper);color:var(--text);border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;
}
[data-theme="dark"] .policy-box{background:#161616;border:1px solid var(--hair-strong)}
.policy-body{overflow-y:auto;overscroll-behavior:contain;padding:8px 24px 28px}
.policy-body h1{font-size:26px;line-height:1.2;margin:22px 48px 4px 0;letter-spacing:-.02em}
.policy-body .date{margin:0 0 18px;font-size:13px;color:var(--text-3)}
.policy-body h2{font-size:17px;margin:22px 0 4px}
.policy-body p,.policy-body li{color:var(--text-2);line-height:1.55;font-size:15px}
.policy-body ul{padding-left:20px}
.policy-body a{color:inherit}
.policy-x{
  position:absolute;top:12px;right:12px;z-index:1;
  width:36px;height:36px;display:grid;place-items:center;padding:0;cursor:pointer;
  color:var(--text-2);background:color-mix(in srgb,var(--text) 8%,transparent);border:0;border-radius:50%;
}
.policy-x:hover{color:var(--text)}
.policy-x svg{width:18px;height:18px}
.theme-toggle{
  flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;
  color:var(--text-2);background:color-mix(in srgb,var(--paper) 80%,transparent);
  border:1px solid var(--hair-strong);border-radius:50%;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.theme-toggle[hidden]{display:none}
.theme-toggle:hover{color:var(--text)}
.theme-toggle:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.theme-toggle svg{width:16px;height:16px}
.icon-sun{display:none}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}

/* The line under the wordmark, set to exactly the wordmark's width.
   It is SVG rather than plain text because `textLength` is the only thing
   that guarantees an exact measure — CSS cannot fit text to a width. */
.tagline{margin:0 0 min(clamp(36px,3.4vw,56px),6.2dvh);width:var(--mark-w)}
.tagline svg{display:block;width:100%;height:auto;overflow:visible}
.tagline text{
  font-family:var(--font-sans);
  font-weight:500;font-size:48px;   /* smaller than the width allows, so textLength opens up the letter spacing */
  fill:var(--text-2);
}

/* two lines under the tagline; the first carries the weight */
.pitch{
  margin:0;
  font-size:max(14px,min(clamp(25.5px,1.98vw,31.5px),3.5dvh));line-height:1.45;
  color:var(--text-2);max-width:30ch;
}
.pitch strong{font-weight:600;color:var(--text)}

/* ---- form ------------------------------------------------------------ */
#signup{margin:min(clamp(26px,2.4vw,38px),4.2dvh) 0 0;max-width:480px}
.field{display:flex;gap:8px;flex-wrap:wrap}
/* the demo's "Join the waitlist" points here: the email box glows twice */
.field.nudge input{animation:field-nudge 1.1s ease-out 2}
@keyframes field-nudge{
  0%{box-shadow:0 0 0 0 rgba(0,122,255,.55)}
  100%{box-shadow:0 0 0 .6em rgba(0,122,255,0)}
}
input[type=email]{
  flex:1 1 190px;min-width:0;height:50px;padding:0 18px;
  font:inherit;font-size:15px;color:var(--text);
  background:var(--bg);border:1px solid var(--hair-strong);border-radius:999px;outline:none;
}
input[type=email]::placeholder{color:var(--text-disabled)}
input[type=email]:focus-visible{
  border-color:var(--text);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent);
}
input[type=email]:disabled{opacity:.5;cursor:not-allowed}
.btn{
  height:50px;padding:0 26px;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.005em;
  color:var(--inv-text);background:var(--inv-bg);
  border:1px solid var(--inv-bg);border-radius:999px;cursor:pointer;
}
.btn:hover{opacity:.88}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{opacity:.5}

.status{margin:12px 0 0;font-size:14px;min-height:1.4em;color:var(--text-2)}
.status.err{color:var(--critical)}


/* ---- slim top bar and its dark backdrop (portrait phones and tablets, after Say Hi) */
.mini-bar,.mini-scrim{display:none}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- stacked: content on top, the demo under it ---------------------- */
@media (prefers-reduced-motion:reduce){.mini-bar,.mini-drawer,.mini-scrim,.mini-status{transition:none !important}}

@media (max-width:880px) and (orientation:portrait){
  .hero{display:flex;flex-direction:column}
  .pane-left{
    max-width:none;padding:40px clamp(24px,4vw,48px) 28px;
    min-height:0;
  }
  .content{padding-right:0;padding-top:14px;padding-bottom:16px}
  .logo{margin-bottom:16px}
  .tagline{margin-bottom:26px}
  /* keep the field and button on one row; two rows pushed the CTA off-screen */
  input[type=email]{flex:1 1 140px;height:46px;font-size:16px}   /* 16px or more: iPhone Safari zooms in on smaller fields */
  .btn{height:46px;padding:0 18px;font-size:14px}
  #signup{margin-top:18px}
  .status{min-height:0}
  .pitch{font-size:clamp(16px,2.4vw,21px);line-height:1.55;width:auto}
  .content{--mark-w:min(100%, max(316px, 60.4vw))}   /* +25% (Evan, 2026-10-16) */
  .pane-thread{
    position:static;height:auto;
    /* the page ends a little under the topics (Evan: some padding, not too much) */
    padding:4px clamp(16px,4vw,48px) calc(env(safe-area-inset-bottom) + 32px);
  }
  /* before Say Hi: the wordmark, tagline, pitch and the Say Hi button. The
     email form waits for the bar after Say Hi. */
  #signup{display:none !important}
  .mini-bar{
    display:block;
    position:fixed;top:0;left:0;right:0;z-index:20;
    padding:calc(env(safe-area-inset-top) + 10px) clamp(16px,4vw,48px) 10px;
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hair);
    transform:translateY(-100%);opacity:0;
    transition:transform .32s cubic-bezier(.3,.7,.2,1),opacity .25s ease;
  }
  .mini-bar.show{transform:none;opacity:1}
  .mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
  /* Join Waitlist opens the bar downward: the drawer eases from 0 to its height */
  .mini-drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.7,.2,1)}
  .mini-bar.open .mini-drawer{grid-template-rows:1fr}
  .mini-form{position:relative;min-height:0;overflow:hidden;
    width:100%;max-width:440px;margin:0 auto}
  .mini-pitch{margin:16px 0 0;font-size:17px;line-height:1.45;color:var(--text-2)}
  .mini-fields{display:flex;gap:8px;padding:14px 0 32px}   /* 32px: room for the one-line message under the pill */
  .mini-fields input[type=email]{flex:1 1 auto;height:48px;font-size:16px}
  .mini-fields .btn{height:48px;padding:0 22px;flex:none;font-size:16px}
  .mini-status{
    position:absolute;left:0;right:0;bottom:4px;margin:0;text-align:center;
    font-size:15px;line-height:1.4;color:var(--text-2);transition:opacity .3s ease;
  }
  .mini-status.err{color:var(--critical)}
  /* success: the message takes the pill row's place, then fades */
  .mini-form.done .mini-fields{visibility:hidden}
  .mini-form.done .mini-status{bottom:32px;height:48px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:500;color:var(--text)}
  .mini-form.fading .mini-status{opacity:0}
  /* the demo, lightly darkened while the bar is open (under the bar, over the demo) */
  /* not position:fixed: iPhone Safari tints its toolbars from fixed layers
     at the screen edges and kept them dark after the bar closed (Evan's
     screenshots, reproduced in the iOS 26 Simulator, 2026-10-21). Absolute
     still covers the screen, since the locked page (html.two) is one screen
     tall. In the page only while the bar is open (.on). */
  .mini-scrim{
    position:absolute;inset:0;z-index:15;
    background:rgba(0,0,0,.65);opacity:0;   /* darker (Evan, 2026-10-17) */
    transition:opacity .3s ease;
  }
  .mini-scrim.on{display:block}
  .mini-scrim.show{opacity:1}
  .mini-mark{display:block;line-height:0;-webkit-tap-highlight-color:transparent}
  .mini-mark img{display:block;height:24px;width:auto}
  .mini-white{display:none !important}
  [data-theme="dark"] .mini-black{display:none !important}
  [data-theme="dark"] .mini-white{display:block !important}
  .mini-join{height:38px;padding:0 16px;font-size:14px;transition:opacity .2s ease,visibility .2s}
  /* open: the drawer has its own Join, so the top one steps aside until it folds again */
  .mini-bar.open .mini-join{opacity:0;visibility:hidden}
  /* Before Say Hi: just the button, right under the sign-up. After: one card
     that fits the screen, texts on top and the topics at its bottom edge,
     scrolled into view clear of Safari's toolbar (thread.js showDemo). */
  .pane-thread .thread-try{padding-bottom:0}
  .pane-thread .thread{max-width:520px;height:auto;scroll-margin:72px 0 calc(env(safe-area-inset-bottom) + 32px)}   /* top: under the slim bar */
  .pane-thread .thread:not(.started) .thread-view{display:none}
  .pane-thread .thread.started{height:calc(100svh - 112px);min-height:400px;max-height:720px}
  .pane-thread .thread .thread-try.opening{position:static;padding:8px 0 0}

  /* After Say Hi (thread.js): the page is locked to one screen holding the
     demo (html.two), under the slim bar. The sign-up lives in the bar. */
  html.two,html.two body{height:100%;overflow:hidden;overscroll-behavior:none}
  html.two .hero{position:fixed;top:0;left:0;right:0;display:block;min-height:0}
  html.two .pane-left{display:none}
  html.two .pane-thread{
    box-sizing:border-box;height:100vh;height:100svh;
    padding:calc(env(safe-area-inset-top) + 64px) clamp(16px,4vw,48px) calc(env(safe-area-inset-bottom) + 64px);   /* top: under the slim bar; bottom: room for .foot */
  }
  html.two .pane-thread .thread.started{height:100%;min-height:0;max-height:none}
}