/*
 * The demo's own styles. The palette and fonts are tokens.css's, the
 * marketing site's copied (R17); nothing here redefines them. The rules
 * that follow the site's (buttons, masthead, footer, the .clip disc and
 * wave) are copied from app/orature-site/site/static/site.css and keep its
 * values, so the demo reads as the same company's.
 */

/* Base, as the site's */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--link-hover);
  outline-offset: 3px;
}

.footer :focus-visible { outline-color: var(--hl); }

h1, h2, h3, p, figure { margin: 0; }

mark { color: var(--on-hl); background: var(--hl); }

/* The page is one inline-size container, as the site's, so sizes in cqi
   follow the page's width. A min-height keeps the footer at the bottom of
   a short page. */
.page {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--page);
  overflow-x: clip;
}

.page > main { flex: 1 0 auto; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}

.skip:focus { top: 12px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.mark {
  color: var(--on-hl);
  background: linear-gradient(transparent 26%, var(--hl) 26%, var(--hl) 91%, transparent 91%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.1em;
  margin: 0 -0.1em;
}

/* Buttons, as the site's. A <button> takes the same look as its links. */

button { font: inherit; color: inherit; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
}

.button:hover { color: var(--on-ink); background: color-mix(in srgb, var(--ink) 86%, var(--page)); }

.button-small { flex: 0 0 auto; min-height: 44px; padding: 0 18px; font-size: 15px; }
.button-large { min-height: 54px; padding: 0 28px; font-size: 17px; }

.button-ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}

.button-ghost:hover { background: transparent; color: inherit; box-shadow: inset 0 0 0 3px currentColor; }

/* Masthead, as the site's */

.hero-band { background: var(--mint); }

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.01em;
  line-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.masthead-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0.5em;
  border: 1px solid var(--ink);
  line-height: 1.6;
}

.masthead-end { margin: 0 0 0 auto; }

/* Footer, as the site's */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 26px var(--gutter) 30px;
  background: var(--deep);
  color: var(--deep-muted);
  font-size: 15px;
}

.footer .wordmark { font-size: 23px; color: var(--deep-text); }
.footer .wordmark:hover { color: var(--hl); }
.footer-note { max-width: 36em; line-height: 1.5; }

/* Fields */

.field-label { font-weight: 600; font-size: 16px; }

.field {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
}

.problem {
  padding: 10px 14px;
  background: var(--hl);
  color: var(--on-hl);
  font-weight: 600;
}

/* Sign-in */

.signin {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(40px, 8cqi, 112px) var(--gutter);
}

.signin-card {
  width: 100%;
  max-width: 460px;
  padding: clamp(24px, 4cqi, 40px);
  background: var(--paper);
  box-shadow: var(--shadow-hero);
}

.signin-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(32px, 5cqi, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.signin-lede { margin-top: 14px; font-size: 18px; color: var(--muted); }

.signin-form { display: grid; gap: 10px; margin-top: 28px; }
.signin-form .button { margin-top: 10px; }

/* The search band */

.search-band { padding: clamp(36px, 6cqi, 88px) var(--gutter) clamp(36px, 5cqi, 64px); }

.search-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(38px, 6.2cqi, 84px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 14em;
  text-wrap: balance;
}

.search-lede {
  margin-top: clamp(14px, 1.8cqi, 24px);
  max-width: 34em;
  font-size: clamp(18px, 1.55cqi, 22px);
  line-height: 1.5;
  text-wrap: pretty;
}

.search { margin-top: clamp(24px, 3cqi, 40px); max-width: 920px; }

.search-row { display: flex; flex-wrap: wrap; gap: 10px; }

.search-input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 60px;
  font-size: clamp(18px, 1.6cqi, 21px);
  box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-card);
}

.search-input::placeholder { color: var(--faint); opacity: 1; }

.search-go { min-height: 60px; flex: 0 0 auto; }

.search-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 40px;
  margin-top: 20px;
}

.options-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}

/* The three ways to search: one segmented choice of real radios. */

.modes { margin: 0; padding: 0; border: 0; min-width: 0; }

.modes-choices {
  display: inline-flex;
  flex-wrap: wrap;
  box-shadow: inset 0 0 0 2px var(--ink);
  border-radius: 2px;
  background: var(--paper);
}

.mode { position: relative; display: inline-flex; }

.mode input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mode span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
}

.mode input:checked + span { background: var(--ink); color: var(--on-ink); }
.mode input:focus-visible + span { outline: 3px solid var(--link-hover); outline-offset: 3px; position: relative; z-index: 1; }

.mode-help { margin-top: 8px; font-size: 15.5px; color: var(--muted); max-width: 32em; }

/* Only the chosen way's explanation shows; without :has all three do. */
.modes:has(input:checked) .mode-help { display: none; }
.modes:has(input[value="best"]:checked) .mode-help[data-mode="best"],
.modes:has(input[value="exact"]:checked) .mode-help[data-mode="exact"],
.modes:has(input[value="meaning"]:checked) .mode-help[data-mode="meaning"] { display: block; }

/* The examples */

.examples { margin-top: clamp(28px, 3.4cqi, 44px); max-width: 1100px; }

.examples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.examples-list li { min-width: 0; max-width: 100%; }

.example {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 14px 10px;
  border: 0;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.example:hover { box-shadow: inset 0 0 0 2px var(--ink); }

.example-query { font-weight: 600; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }

.example-shows {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* The results band */

.results-band {
  padding: clamp(28px, 4cqi, 56px) var(--gutter) var(--band-y);
  background: var(--page);
  border-top: 1px solid var(--rule);
}

.results-band > * { max-width: 920px; }

.status {
  min-height: 1.55em;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--label);
}

.results:focus { outline: none; }

.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }

.result { min-width: 0; }

/* The cards: the site's paper sheets with their shadow, set straight. */

.card {
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: clamp(16px, 2.4cqi, 26px);
  min-width: 0;
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 14px;
}

.kind-tag {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-transform: uppercase;
}

.kind-passage { background: var(--ink); color: var(--paper); }

.card-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}

.moved {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 0.5em;
  line-height: 1.7;
  background: var(--hl);
  color: var(--on-hl);
}

.card-body { display: flex; align-items: center; gap: 16px; min-width: 0; }
.card-text { min-width: 0; }

.card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 2.2cqi, 27px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.card-show .card-title { font-size: clamp(24px, 2.8cqi, 32px); font-weight: 800; }

.byline, .source-show { color: var(--muted); font-size: 15.5px; overflow-wrap: anywhere; }
.source-show { font-weight: 600; color: var(--label); }
.source-episode { font-size: 15.5px; overflow-wrap: anywhere; }

.card-source { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; min-width: 0; }
.card-moment > .card-title { margin-bottom: 4px; }

.speakers { font-size: 15.5px; color: var(--muted); }

/* Artwork, and its designed stand-in */

.art { flex: 0 0 auto; display: block; object-fit: cover; background: var(--tint); border-radius: 2px; }
.art-small { width: 48px; height: 48px; }
.art-medium { width: 76px; height: 76px; }
.art-large { width: clamp(84px, 12cqi, 120px); height: clamp(84px, 12cqi, 120px); }

.art-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mint);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.art-small.art-fallback { font-size: 17px; }
.art-medium.art-fallback { font-size: 26px; }
.art-large.art-fallback { font-size: clamp(30px, 4cqi, 40px); }

/* A show's newest episodes */

.show-episodes { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }

.episode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.episode-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  min-width: 0;
}

.episode-list-title { min-width: 0; overflow-wrap: anywhere; }

.episode-list-date { font-family: var(--mono); font-size: 14px; color: var(--muted); white-space: nowrap; }

/* A moment: its words, then the site's clip */

.moment { margin-top: 14px; min-width: 0; }

.quote {
  font-size: clamp(18px, 1.7cqi, 20px);
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.quote mark { padding: 0.12em 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.moment-compact .quote { font-size: 16.5px; color: var(--muted); }

/* The clip: the site's .clip disc and wave, copied (R17). */

.clip { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

.disc {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 4px;
  cursor: pointer;
}

.disc path { fill: var(--paper); }
.disc:hover { background: color-mix(in srgb, var(--ink) 86%, var(--page)); }

.moment-compact .disc { width: 44px; height: 44px; padding-left: 3px; }

.scrub { flex: 1 1 auto; min-width: 0; position: relative; }

.wave { width: 100%; height: 56px; display: block; }
.moment-compact .wave { height: 44px; }

.wave rect { fill: var(--hl); }

.wave path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.clip-times {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-left: 64px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--label);
}

.moment-compact .clip-times { padding-left: 58px; }

/* More moments from the same episode */

.more { margin-top: 20px; border-top: 1px solid var(--rule); }

.more-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-top: 4px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.more-summary::-webkit-details-marker { display: none; }

.more-summary::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 4px;
}

.more[open] > .more-summary::before { transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  .more-summary::before { transition: transform 0.15s; }
}

.more-list { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 4px; }

.more-item { padding: 14px 0 16px; border-top: 1px dashed var(--rule-strong); min-width: 0; }

.more-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
}

.more-at { font-family: var(--mono); font-weight: 400; font-size: 14px; color: var(--muted); }

.more-item .moment { margin-top: 6px; }

/* Searching: the cards' shapes, so nothing jumps when they arrive. */

.card-skeleton { min-height: 150px; }

.bone { background: var(--tint); border-radius: 2px; }
.bone-tag { width: 84px; height: 22px; margin-bottom: 16px; }
.bone-art { flex: 0 0 auto; width: 76px; height: 76px; }
.bone-title { width: min(360px, 60cqi); height: 24px; }
.bone-line { width: min(220px, 40cqi); height: 16px; margin-top: 10px; }
.bone-para { height: 64px; margin-top: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .bone { animation: breathe 1.6s ease-in-out infinite; }
}

@keyframes breathe {
  50% { opacity: 0.55; }
}

/* Notices: nothing found, busy, no answer */

.notice {
  padding: clamp(20px, 3cqi, 32px);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--ink);
}

.notice-problem { border-top-color: var(--hl); }

.notice-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 2.2cqi, 26px);
  line-height: 1.25;
  text-wrap: pretty;
}

.notice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.notice-actions .button { white-space: normal; text-align: left; }

/* The first visit */

.welcome { padding-top: 4px; }

.welcome-kinds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 22px 28px;
}

.welcome-kinds li { border-top: 2px solid var(--ink); padding-top: 14px; }
.welcome-kinds p { margin-top: 10px; text-wrap: pretty; }

.welcome-note { margin-top: 28px; color: var(--muted); }

/* Phone widths: the three ways to search share one row, two lines each. */
@container (max-width: 420px) {
  .modes-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mode span { justify-content: center; padding: 6px; font-size: 14.5px; line-height: 1.2; text-align: center; white-space: normal; }
  .search-go { flex: 1 1 100%; }
}

/* The player, opened inside the moment being played */

.player { margin-top: 2px; }

.transcript {
  position: relative;
  max-height: 13.5em;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  background: var(--page);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: clamp(18px, 1.7cqi, 20px);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.moment-compact .transcript { font-size: 17px; }

.transcript .quote { font-size: inherit; }

.word { cursor: pointer; border-radius: 2px; padding: 0.08em 0; }
.word:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; }

/* The word being spoken: the site's highlight, with its own dark text in
   both colour schemes. */
.word.now {
  background: var(--hl);
  color: var(--on-hl);
  box-shadow: 0 0 0 0.12em var(--hl);
  text-decoration: none;
}

.turn, .transcript-section {
  display: block;
  margin-top: 0.7em;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--label);
}

.turn:first-child, .transcript-section:first-child { margin-top: 0; }

.transcript-section {
  padding-top: 0.6em;
  border-top: 1px dashed var(--rule-strong);
  font-weight: 700;
  text-transform: uppercase;
}

.transcript-section + .turn { margin-top: 0.3em; }

.player .scrub { cursor: pointer; touch-action: none; }

.player .clip-times { padding-left: 64px; }
.clip-where { text-align: center; }

.player-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
}

.player-state { font-family: var(--mono); font-size: 14px; color: var(--label); min-height: 1.5em; }

.unplayable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--hl);
  background: var(--tint);
  font-weight: 600;
}

@container (max-width: 420px) {
  .clip-where { display: none; }
}

/* The smarter-ranking switch: a real checkbox, drawn as the site's ink. */

.rank { min-width: 0; max-width: 24em; }

.switch { position: relative; display: inline-flex; align-items: center; min-height: 44px; }

.switch-input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 48px;
  height: 28px;
  margin: -14px 0 0;
  opacity: 0;
  cursor: pointer;
}

.switch-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  cursor: pointer;
}

.switch-label::before {
  content: "";
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--ink);
  background: var(--paper) radial-gradient(circle at 14px 50%, var(--ink) 8px, transparent 8.5px);
}

.switch-input:checked + .switch-label::before {
  background: var(--ink) radial-gradient(circle at 34px 50%, var(--hl) 8px, transparent 8.5px);
}

.switch-input:focus-visible + .switch-label::before { outline: 3px solid var(--link-hover); outline-offset: 3px; }

.rank .mode-help { margin-top: 4px; }