/* The Keniri beta (/beta/): the conversation and the report. Builds on
   site.css and uses only its tokens. Amber and coral always appear together,
   as the two dots; buttons use amber as on the rest of the site. */

.beta-main { padding-block: 2.5rem 4rem; }
.screen > * { max-width: var(--measure); }
.screen[hidden], .beta [hidden] { display: none !important; }

.title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 1.25rem;
}
.mist { color: var(--mist); font-weight: var(--weight-regular); }
/* Headings get focus when a screen changes, for screen readers; no ring for that */
.beta [tabindex="-1"]:focus { outline: none; }
.notice { color: var(--coral); font-weight: var(--weight-bold); }

.facts { color: var(--mist); padding-left: 1.25rem; margin: 0 0 2rem; }
.facts li + li { margin-top: 0.35rem; }

/* Forms */
.stack { display: grid; gap: 1.25rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }

.check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; cursor: pointer; }
.check input { width: 1.375rem; height: 1.375rem; margin: 0.2rem 0 0; accent-color: var(--amber); }

.input { border: 0; margin: 0; padding: 0; min-width: 0; }
.input > label, .input > legend { display: block; font-weight: var(--weight-bold); padding: 0; margin-bottom: 0.25rem; }
.hint { color: var(--mist); font-size: var(--text-sm); margin: 0 0 0.6rem; }
.pair { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.beta input[type="text"], .beta select, .beta textarea {
  font: inherit;
  font-size: 1.0625rem;
  color: var(--night);
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  width: 100%;
  max-width: 100%;
}
.beta select { width: auto; min-width: 7rem; border-radius: var(--radius-pill); padding-right: 2.25rem; }
.beta input[type="text"] { border-radius: var(--radius-pill); max-width: 20rem; }
.beta textarea { resize: vertical; line-height: 1.5; }
.beta textarea::placeholder, .beta input::placeholder { color: var(--placeholder); opacity: 1; }
.beta input:focus-visible, .beta select:focus-visible, .beta textarea:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-color: var(--amber); }

.button[disabled] { opacity: 0.6; cursor: progress; }
.button.ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--amber); }
.button.ghost:hover { background: var(--amber); color: var(--night); }
.link {
  font: inherit;
  color: var(--mist);
  background: none;
  border: 0;
  padding: 0.5rem 0;
  min-height: 2.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}
.link:hover { color: var(--amber); }

/* The conversation */
.chat > * { max-width: 40rem; }
.chat-bar {
  /* Pinned to the top while the conversation scrolls, so "how many to go" is always in view */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink);
  padding: 0.5rem 0 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.chat-bar-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.progress { margin: 0; color: var(--cream); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.progress .mist { font-weight: var(--weight-regular); }

/* Answers so far, out of the 36 at most. The lighter stretch from 30 to 36 is
   where conversations usually end. */
.meter { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--rule); overflow: hidden; margin-top: 0.4rem; }
.meter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 83.333%; right: 0; background: rgba(201, 196, 230, 0.35); }
.meter-fill { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 0; background: var(--amber); border-radius: var(--radius-pill); transition: width 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.log li { max-width: 88%; padding: 0.85rem 1.15rem; border-radius: 1.25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.log .keniri { background: var(--night); border-bottom-left-radius: 0.35rem; justify-self: start; }
.log .you { background: rgba(201, 196, 230, 0.14); border-bottom-right-radius: 0.35rem; justify-self: end; color: var(--cream); }
.log .you.sending { opacity: 0.7; }

/* The two dots, small, as the typing indicator */
.typing { display: flex; gap: 0.5rem; padding: 1rem 1.15rem; }
.typing span { width: 0.7rem; height: 0.7rem; border-radius: 50%; animation: speak var(--turn) ease-in-out infinite; }
.typing .a { background: var(--amber); }
.typing .c { background: var(--coral); animation-delay: calc(var(--turn) / 2); }

.finish { margin-top: 1.25rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.finish p { margin: 0; color: var(--mist); font-size: var(--text-sm); flex: 1 1 14rem; }
.button.small { font-size: var(--text-sm); padding: 0.55rem 1.1rem; }

.composer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  margin-top: 1.5rem;
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0));
  background: var(--ink);
}
.composer textarea { flex: 1 1 auto; min-height: 3.25rem; max-height: 40vh; }
.composer .button { flex: 0 0 auto; }
.keep { margin-top: 0.5rem; }
.dictate { margin-top: 0.25rem; }

/* Stop dialog */
.confirm {
  max-width: min(28rem, calc(100vw - 2 * var(--gutter)));
  background: var(--night);
  color: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.confirm::backdrop { background: rgba(34, 31, 71, 0.75); }
.confirm h2 { margin: 0 0 0.5rem; font-size: var(--text-xl); font-weight: var(--weight-extrabold); }
.confirm p { color: var(--mist); margin: 0 0 1.25rem; }

/* The report */
.report > * { max-width: 38rem; }
.report-body p { margin: 0 0 1rem; }
.version { margin-top: 0.25rem; }
.basis { color: var(--mist); font-size: var(--text-sm); margin: -0.5rem 0 1.75rem; }
.report-body .opening p:first-child { font-size: var(--text-lg); }
.report-body h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-snug);
  margin: 3rem 0 1rem;
}
.insight { margin: 0 0 1.75rem; }
.insight blockquote {
  margin: 0.5rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 3px solid var(--rule);
  color: var(--mist);
  font-size: var(--text-sm);
}
.insight blockquote p { margin: 0.25rem 0; }
.insight blockquote p::before { content: "You said: "; font-weight: var(--weight-bold); }
.card { margin-top: 3rem; padding: 1.5rem; background: var(--night); border-radius: 1.25rem; }
.card h2 { margin-top: 0; font-size: var(--text-xl); }
.card .sub { color: var(--mist); font-weight: var(--weight-bold); margin: -0.5rem 0 1rem; }
.card p:last-child { margin-bottom: 0; }
.closing { margin-top: 3rem; }

/* Feedback */
.feedback { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.feedback h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-extrabold); }
.scale { border: 0; margin: 0; padding: 0; min-width: 0; }
.scale legend { font-weight: var(--weight-bold); padding: 0; margin-bottom: 0.6rem; }
.dots { display: flex; gap: 0.6rem; }
.dots label { position: relative; }
.dots input { position: absolute; opacity: 0; inset: 0; }
.dots span {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--rule);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.dots input:checked + span { background: var(--amber); border-color: var(--amber); color: var(--night); }
.dots input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }
.choices { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border-radius: var(--radius-pill); border: 2px solid var(--rule); font-weight: var(--weight-bold); cursor: pointer; }
.choice input:checked + span { background: var(--amber); border-color: var(--amber); color: var(--night); }
.choice input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }
.ends { display: flex; justify-content: space-between; max-width: 15.6rem; color: var(--mist); font-size: var(--text-sm); margin: 0.35rem 0 0; }
.thanks { margin-top: 3rem; font-weight: var(--weight-bold); color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .typing span { animation: none; }
}

/* The print header (logo and date) only appears on paper and in PDFs. */
.print-brand { display: none; }

/* Print and Save as PDF: an A4 document rather than a copy of the screen.
   Light page, Keniri wordmark at the top, page numbers in the bottom margin
   (Chromium; other browsers skip margin boxes and print without them), quotes
   kept with their insight and headings kept with what follows. Backgrounds
   are off by default in print dialogs, so nothing relies on one. */
@page {
  size: A4;
  background: #fff;
  margin: 18mm 20mm 20mm;
  @bottom-left { content: "keniri.com"; font-family: "Nunito", system-ui, sans-serif; font-size: 8pt; color: #6b6690; }
  @bottom-right { content: counter(page) " of " counter(pages); font-family: "Nunito", system-ui, sans-serif; font-size: 8pt; color: #6b6690; }
}

@media print {
  :root { --cream: #1b1838; --mist: #55507a; --night: #f6f3fb; --ink: #fff; --rule: #d9d4ea; color-scheme: light; }
  html, body { background: #fff; color: #1b1838; padding: 0; }
  body { font-size: 10.5pt; line-height: 1.55; }
  header.site, footer.site, .skip, .noprint, [data-expiry], [data-screen]:not([data-screen="report"]) { display: none !important; }
  .beta-main { padding: 0; max-width: none; }
  .report > * { max-width: none; }

  .print-brand {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 5mm; margin-bottom: 9mm;
    border-bottom: 0.6pt solid var(--rule);
    color: var(--mist); font-size: 9pt;
  }
  .print-brand svg { width: 30mm; height: auto; }

  .title { font-size: 26pt; color: #2e2a5a; margin: 0 0 2mm; }
  .basis { font-size: 9pt; margin: 0 0 8mm; }
  .report-body p { margin: 0 0 3mm; orphans: 3; widows: 3; }
  .report-body .opening p:first-child { font-size: 13pt; line-height: 1.45; color: #2e2a5a; }

  .report-body h2 {
    font-size: 16pt; color: #2e2a5a;
    margin: 10mm 0 4mm; padding-top: 3mm;
    border-top: 2pt solid var(--amber);
    break-after: avoid; page-break-after: avoid;
  }
  .theme h2 { width: fit-content; padding-right: 6mm; }
  .theme h2 + .insight { break-before: avoid; }
  .insight { margin: 0 0 6mm; break-inside: avoid; page-break-inside: avoid; }
  .insight blockquote {
    margin: 2mm 0 0; padding: 0.5mm 0 0.5mm 4mm;
    border-left: 1.5pt solid var(--coral);
    font-size: 9.5pt; line-height: 1.45; font-style: italic;
  }
  .insight blockquote p { margin: 0 0 1mm; }
  .insight blockquote p::before { font-style: normal; }

  .card {
    margin-top: 10mm; padding: 6mm 7mm;
    border: 0.6pt solid var(--rule); border-left: 3pt solid var(--amber); border-radius: 3mm;
    background: none; break-inside: avoid;
  }
  .card h2 { border-top: 0; padding-top: 0; margin: 0 0 1mm; font-size: 13pt; }
  .card .sub { margin: 0 0 3mm; }

  .closing { margin-top: 10mm; break-inside: avoid; break-before: avoid; font-size: 11.5pt; color: #2e2a5a; }
  .closing::before {
    content: ""; display: block; width: 8mm; height: 3mm; margin-bottom: 4mm;
    background: radial-gradient(circle at 1.5mm 1.5mm, var(--amber) 1.5mm, transparent 1.6mm) no-repeat,
                radial-gradient(circle at 6.5mm 1.5mm, var(--coral) 1.5mm, transparent 1.6mm) no-repeat;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .version { font-size: 8pt; margin-top: 8mm; }
}