/* [graft:EVA-CHAT-CSS] the hand-off form inside the chat */
.msg.eva-handoff { display: flex; flex-direction: column; gap: .45rem; max-width: 92%; padding: .7rem .75rem .75rem; }
.eva-handoff .eh-h { font-weight: 600; font-size: .86rem; color: var(--ink); }
.eva-handoff label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: #4B5049; }
.eva-handoff input, .eva-handoff textarea {
  font: inherit; font-size: .85rem; line-height: 1.4; padding: .45rem .55rem;
  border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); resize: vertical;
}
.eva-handoff input:focus, .eva-handoff textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.eva-handoff .eh-fine { font-size: .68rem; color: #6D7268; }
.eva-handoff .eh-err { font-size: .74rem; color: #A81F1B; }
.eva-handoff .eh-err:empty { display: none; }
.eva-handoff .eh-acts { display: flex; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; }
.eva-handoff button {
  font: inherit; font-size: .8rem; border-radius: 999px; padding: .4rem .85rem; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
}
.eva-handoff .eh-go { background: var(--accent); border-color: var(--accent); color: #fff; }
.eva-handoff button:disabled { opacity: .6; cursor: default; }
/* A phone zooms into any field set smaller than 16px; the chat stays put. */
@media (max-width: 600px) {
  .chat-form input, .eva-handoff input, .eva-handoff textarea { font-size: 16px; }
}

  /* live sign-up: country picker rows (adapter-built) */
  .country-opt{display:flex;align-items:center;gap:.7rem}
  .country-flag{font-size:1.15rem;line-height:1;flex:0 0 auto}
  .country-opt b{font-size:.95rem;font-weight:500}
  .country-soon b{color:var(--ink-3)}

  /* the demo's casing, tightened — less chrome, same screen */
  .stage .layer-card .wrap { max-width: 1080px; }
  .stage .showreal {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.09);
  }
  .stage .showreal figcaption { padding: 0.5rem 0.85rem; font-size: 0.64rem; }

  /* a soft emerald bloom around the zoomed-out card. Pinned stages drive it
     from the scroll (--zoom-glow set by the stage script); phones and
     reduced-motion viewports never pin, so theirs rests at a quiet constant. */
  .stage.pinned .showreal {
    box-shadow:
      0 1px 2px rgba(10,10,10,0.05),
      0 18px 44px rgba(10,10,10,0.09),
      0 0 calc(42px * var(--zoom-glow, 0)) rgba(26,135,84, calc(0.30 * var(--zoom-glow, 0))),
      0 0 calc(110px * var(--zoom-glow, 0)) rgba(26,135,84, calc(0.16 * var(--zoom-glow, 0)));
  }
  .stage:not(.pinned) .showreal {
    box-shadow:
      0 1px 2px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.09),
      0 0 34px rgba(26,135,84,0.16), 0 0 90px rgba(26,135,84,0.09);
  }

  /* the ten-year line flows in, left to right; on phones the same order
     reads top to bottom. Reduced motion sees it settled. */
  @media (prefers-reduced-motion: no-preference) {
    .tl .tl-line {
      transform: scaleX(0); transform-origin: 0 50%;
      transition: transform 1.6s cubic-bezier(0.25, 0.7, 0.3, 1) 0.12s;
    }
    .tl div.tl-stop {
      opacity: 0; transform: translateX(-26px);
      transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .tl div.tl-stop:nth-of-type(1) { transition-delay: 0.05s; }
    .tl div.tl-stop:nth-of-type(2) { transition-delay: 0.19s; }
    .tl div.tl-stop:nth-of-type(3) { transition-delay: 0.33s; }
    .tl div.tl-stop:nth-of-type(4) { transition-delay: 0.47s; }
    .tl div.tl-stop:nth-of-type(5) { transition-delay: 0.61s; }
    .tl.flow .tl-line { transform: scaleX(1); }
    .tl.flow div.tl-stop { opacity: 1; transform: none; }
  }

  /* The Ledger: blocks the console can write, and the server-rendered first
     paint (body[data-ssr] until the router takes over). */
  /* (lists and callouts are the design's own since v1.1_81_1) */
  .lg-prose a{color:#0B5137;text-decoration:underline;text-underline-offset:2px}
  .lg-rss{margin-top:1rem}
  .lg-rss em{display:block;margin-top:.35rem;font-size:.85rem;color:var(--ink-3,#525252)}
  body[data-ssr] #site{display:none}
  .ssr-list{list-style:none;padding:0;margin:1.5rem 0 3rem}
  .ssr-list li{padding:1.1rem 0;border-bottom:1px solid rgba(10,10,10,.08)}
  .ssr-list a{font-weight:600;color:inherit}
  .post .post-art{background:linear-gradient(140deg,#EEF6F1,#CDE9DA)}

  /* Personal web (personal-web.js): the log-in's password-link form, its
     notices, the labelled phone picture, the code in words; the chat's
     extra links, photo controls and camera preview. */
  .plg .lg-links{flex-wrap:wrap;justify-content:flex-start;column-gap:1.4rem;row-gap:.45rem}
  .plg-notice{margin:1rem 0 0;font-size:.86rem}
  .plg .hint a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .plg-pwlink{margin-top:1rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);padding:.9rem 1rem}
  .plg-pwlink b{display:block;font-size:.92rem;font-weight:600}
  .plg-pwlink p{margin:.3rem 0 .8rem;font-size:.82rem;color:var(--ink-2);line-height:1.5}
  .plg-pwlink .field{margin:0}
  .plg-lrow{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.1rem;margin-top:.75rem}
  .plg-lnote{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-2)}
  .plg-lnote.lg-bad{color:#A81F1B}
  .plg-pwlink .plg-lnote{margin:.7rem 0 0}
  .plg-lrow .lg-link{font-size:.86rem}
  /* the design's .field .hint outranks .lg-bad, so its error hints never turned red */
  .plg .field .hint{display:block}
  .plg .field .hint.lg-bad{color:#A81F1B}
  .plg-ill{margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem}
  .plg-ill figcaption{text-align:center}
  .plg-illx{pointer-events:none;user-select:none;-webkit-user-select:none}
  .plg-illx button{cursor:default}
  .plg-code{margin-top:1rem;font-size:.9rem;color:var(--ink-2)}
  .plg-code b{font-family:var(--mono);font-size:1.12rem;letter-spacing:.08em;color:var(--forest);white-space:nowrap}
  .plg-noqr{width:170px;min-height:120px;display:grid;place-items:center;text-align:center;padding:1rem;border:1px dashed var(--line-2);border-radius:14px;font-size:.78rem;color:var(--ink-2)}
  .phm-capt{display:inline-block;padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.72rem}
  .pc-more{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.55rem}
  .pc-link{border:0;background:none;padding:0;font:inherit;font-size:.8rem;font-weight:600;color:var(--forest);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .pc-pbar{flex-wrap:wrap}
  .pc-pick{position:relative;overflow:hidden}
  .pc-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .pc-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
  .pc-cam{border-radius:14px;overflow:hidden;background:#12201A;margin-bottom:.6rem;display:grid;place-items:center}
  .pc-cam video{display:block;width:100%;max-height:44vh;object-fit:contain}
  .pc-shot{display:block;max-width:140px;max-height:140px;border-radius:10px;margin-bottom:.35rem}
  /* buttons inside a chat bubble: the design's .pc-b a outranked .btn and
     drew them dark on green, underlined */
  .pc-b .pc-go .btn{color:var(--accent-ink);text-decoration:none}
  .pc-b .pc-go .btn-ghost{color:var(--ink)}
  /* THE TIME UNDER A CHAT LINE IS A TIME, NOT A PILL (owner, 21 Oct 2026:
     "remove the casing surrounding the time on the chat as its confusing").
     The design uses .pc-t twice: for the personal page's tab pills (padding,
     a 999px radius and an inset ring) and for the stamp inside a bubble.
     The pill rule leaked onto the stamp, so every message carried what
     looked like an empty field under it. */
  .pc-b .pc-t{display:block;width:auto;padding:0;margin:.25rem 0 0;border:0;border-radius:0;background:none;box-shadow:none;cursor:default;font-weight:400;letter-spacing:0}
  @media (max-width: 640px){
    .pc-voices{grid-template-columns:1fr 1fr}
    .pc-voice{padding:.5rem .6rem;gap:.5rem}
    .plg-code b{font-size:1rem}
  }

  /* [graft:ANALYTICS] the analytics question */
  .ga-ask{position:fixed;left:1.35rem;bottom:1.35rem;z-index:61;max-width:23rem;padding:1rem 1.1rem;
    background:var(--paper,#fff);color:var(--ink,#0A0A0A);border:1px solid var(--line-2,#C8DCD1);border-radius:var(--r-sm,10px);
    box-shadow:0 12px 32px rgba(10,10,10,.12);font:400 .9rem/1.5 var(--body,system-ui,sans-serif)}
  .ga-ask p{margin:0 0 .8rem}
  .ga-ask a{color:var(--forest,#0B5137);text-decoration:underline;text-underline-offset:2px}
  .ga-ask-b{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
  .ga-ask .ga-no{background:none;border:1px solid var(--line-2,#C8DCD1);border-radius:999px;padding:.55rem 1.1rem;
    font:600 .87rem/1 var(--body,system-ui,sans-serif);color:var(--ink,#0A0A0A);cursor:pointer}
  .ga-ask button:focus-visible{outline:2px solid var(--forest,#0B5137);outline-offset:2px}
  @media (max-width:600px){.ga-ask{left:.75rem;right:.75rem;bottom:4.6rem;max-width:none}}