/* Destar - the public site.
   Earth: sand paper, umber ink, and one saturated colour (clay) that appears only
   when something needs you. One type family, Recursive: Casual for the name and the
   statement, Sans for talk, Mono for work.

   The session on this page is the product's own conversation, so the block marked
   "from the product" is copied from src/web/app.css. When the product's look changes,
   change that block to match. */

@font-face {
  font-family: 'Recursive Variable';
  font-style: normal;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/fonts/recursive-destar-v1.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --paper: #f3eee4;
  --raised: #fbf8f1;
  --ink: #2b2118;
  --soft: #75695b;
  --line: #ddd4c3;
  --wash: #e9e1d2;
  --call: #c9582c;
  --call-text: #a5431d;

  --sans: 'Recursive Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --talk: 'MONO' 0, 'CASL' 0;
  --work: 'MONO' 1, 'CASL' 0;
  --mark: 'MONO' 0, 'CASL' 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1d1915;
    --raised: #28221c;
    --ink: #eee6d6;
    --soft: #a69b8c;
    --line: #3b332a;
    --wash: #2f2921;
    --call: #e57f52;
    --call-text: #efa27e;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-variation-settings: var(--talk);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

pre,
code {
  font-family: var(--sans);
  font-variation-settings: var(--work);
}

button {
  font: inherit;
  font-variation-settings: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- the page ------------------------------------------------------------- */

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.top {
  padding-top: clamp(20px, 3.4vh, 32px);
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  column-gap: clamp(48px, 6.5vw, 96px);
  align-items: start;
  align-content: center;
  padding: clamp(24px, 5vh, 56px) 0 clamp(28px, 6vh, 64px);
}

.say {
  position: sticky;
  top: clamp(24px, 5vh, 56px);
}

.say h1 {
  margin: 0 0 26px;
  font-variation-settings: var(--mark);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.say .lede {
  margin: 0 0 30px;
  max-width: 35ch;
  font-size: 20px;
  line-height: 1.55;
  color: var(--soft);
}

.say .soon {
  margin: 0;
  font-variation-settings: var(--mark);
  font-weight: 750;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.session {
  width: 100%;
  max-width: 600px;
  justify-self: end;
}

.end {
  padding: 0 0 26px;
  font-size: 13.5px;
  color: var(--soft);
}

.end p {
  margin: 0;
}

/* The page that answers for an address with nothing at it. */
.stage.lost {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 5vh, 56px) 0 clamp(64px, 16vh, 160px);
}

.lost h1 {
  margin: 0 0 18px;
  font-variation-settings: var(--mark);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.lost p {
  margin: 0 0 8px;
  max-width: 60ch;
  font-size: 19px;
  color: var(--soft);
}

.lost a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---- what has not happened yet --------------------------------------------- */

/* Each step keeps its place from the first frame, so nothing below it moves when it
   arrives. Without scripts, or with motion turned down, none of this applies and the
   page simply shows the session waiting. */
.pre .session [data-step],
.pre .session .w {
  visibility: hidden;
}

.pre .session [data-step].on,
.pre .session .w.on {
  visibility: visible;
}

/* Keeps the last block's bottom margin inside the transcript, so the status line
   below always starts the same distance from whatever came last. */
.talk {
  display: flow-root;
}

/* Until the script takes over, the closing state written in the page stays quiet too. */
.pre:not(.go) .status > span {
  visibility: hidden;
}

.pre:not(.go) .eyes-waiting {
  color: inherit;
}

.session [hidden] {
  display: none;
}

/* A line that does not open. */
.tool-line.still,
.tool-line.still:hover {
  cursor: default;
  color: var(--soft);
}

/* ==== from the product (src/web/app.css) ==================================== */

/* ---- wordmark ---- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-variation-settings: var(--mark);
  font-weight: 850;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
}

.eyes {
  height: 0.6em;
  width: auto;
  margin-right: 0.2em;
  overflow: visible;
}

.eye {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.6;
}

.pupils circle {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

.eyes-idle .pupils circle {
  animation: blink 7s infinite;
}

.eyes-working .pupils {
  animation: scan 2.2s ease-in-out infinite;
}

.eyes-waiting {
  color: var(--call);
}

@keyframes scan {
  0%,
  100% {
    transform: translateX(-2.4px);
  }
  50% {
    transform: translateX(2.4px);
  }
}

@keyframes blink {
  0%,
  95.5%,
  100% {
    transform: scaleY(1);
  }
  97.5% {
    transform: scaleY(0.12);
  }
}

/* ---- conversation ---- */

.you {
  margin: 0 0 22px;
  padding: 12px 16px;
  background: var(--raised);
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reply {
  margin: 0 0 26px;
}

.notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -8px 0 26px;
  font-size: 15px;
  color: var(--soft);
}

.problem {
  color: var(--call-text);
}

.prose {
  overflow-wrap: anywhere;
}

.prose p {
  margin: 0;
}

.prose code {
  font-variation-settings: var(--work);
  font-size: 0.9em;
  background: var(--wash);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---- status line and message box ---- */

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin: 0;
  padding: 0 4px 6px;
  font-size: 14px;
  color: var(--soft);
}

.elapsed {
  font-variation-settings: var(--work);
  font-size: 13px;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.composer .box {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 7px 0;
  line-height: 1.5;
  color: var(--soft);
}

.btn {
  padding: 7px 16px;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.btn.ghost {
  color: var(--ink);
  background: none;
  border-color: var(--line);
}

.btn.ghost:hover {
  background: var(--wash);
}

/* ---- tool activity ---- */

.tool {
  margin: -14px 0 22px;
}

.reply + .tool,
.you + .tool {
  margin-top: -10px;
}

.tool + .tool {
  margin-top: -18px;
}

.tool-line {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 3px 6px 3px 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-variation-settings: var(--work);
  font-size: 14px;
  color: var(--soft);
}

.tool-line:disabled {
  cursor: default;
}

.tool-line:not(:disabled):hover {
  color: var(--ink);
}

.chev {
  width: 9px;
  height: 9px;
  align-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chev.open {
  transform: rotate(90deg);
}

.tool-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tool-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.tool-declined .tool-meta {
  color: var(--ink);
  font-weight: 600;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.tool-body {
  margin: 4px 0 6px 20px;
}

.tool-body pre,
.ask pre {
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  max-height: 340px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cmd .arg {
  white-space: nowrap;
}

/* Approval: the one place the page raises its voice. */
.ask {
  margin: -6px 0 26px;
  padding: 14px 16px 16px;
  background: var(--raised);
  border-radius: 12px;
}

.ask-q {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--call-text);
}

.ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.btn.call {
  color: #fff;
  background: var(--call-text);
  border-color: var(--call-text);
}

@media (prefers-color-scheme: dark) {
  .btn.call {
    color: #2b1608;
  }
}

/* ---- session options ---- */

.options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 8px 4px 0;
  font-size: 13.5px;
  color: var(--soft);
}

.options .mode {
  color: var(--ink);
}

.quiet-link {
  padding: 0;
  background: none;
  border: 0;
  font-size: 13.5px;
  color: var(--soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.quiet-link:hover {
  color: var(--ink);
}

.options .quiet-link {
  margin-left: auto;
}

/* ==== end of the product's rules ============================================ */

/* ---- phone ---------------------------------------------------------------- */

@media (max-width: 900px) {
  html,
  body {
    font-size: 16px;
  }

  .page {
    padding: 0 max(20px, 5vw);
  }

  .stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
    align-content: start;
    padding-top: 36px;
  }

  .say {
    position: static;
  }

  .say h1 {
    margin-bottom: 20px;
  }

  .say .lede {
    max-width: 42ch;
    margin-bottom: 24px;
    font-size: 18.5px;
  }

  .session {
    max-width: 640px;
    justify-self: start;
  }

  .wordmark {
    font-size: 26px;
  }
}

@media (min-width: 901px) and (max-height: 800px) {
  .stage {
    padding: 20px 0 22px;
  }

  .say {
    top: 20px;
  }

  .say h1 {
    margin-bottom: 20px;
    font-size: clamp(40px, 4.1vw, 54px);
  }

  .say .lede {
    margin-bottom: 22px;
    font-size: 18.5px;
  }

  .end {
    padding-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyes .pupils,
  .eyes .pupils circle,
  .dot {
    animation: none;
  }
}