/* Interview: one question per screen. Nothing on screen that is not the question. */

/* The question on the left page, the thing it fills in on the right. The
   header, the question and the buttons share the wrap's left edge. */
.iv-shell { min-height: 100dvh; display: flex; flex-direction: column; --iv-col: 40rem; }
/* The bars at the top and bottom stay on screen; a box that takes focus must
   not land underneath either of them. */
html:has(.iv-shell) { scroll-padding: 5rem 0 9rem; }

.iv-top { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.iv-top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.1rem 0; }
.iv-top .brand { grid-column: 2; }
.iv-progress { height: 2px; background: var(--rule); }
.iv-progress i { display: block; height: 100%; background: var(--ink); width: 0; transition: width .3s ease; }
.iv-count { font-variant-numeric: tabular-nums; }
.iv-saved { justify-self: end; text-align: right; display: inline-flex; align-items: center; gap: .5rem; }
.iv-saved::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .3; transition: opacity .3s; }
.iv-saved.is-fresh::before { opacity: 1; }

/* Bottom padding clears the sticky nav so the last field is never jammed
   against it at the end of a long screen. */
.iv-main { flex: 1; padding: clamp(2rem, 6vw, 3.5rem) 0 4rem; }
.iv-grid { display: grid; grid-template-columns: minmax(0, var(--iv-col)) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.iv-q > .eyebrow { font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; }
.iv-q h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: .6rem; }
.iv-q .why { color: var(--ink-2); max-width: 52ch; margin-bottom: 1.75rem; line-height: 1.6; }
.iv-fields { margin-bottom: 2rem; }

/* The right-hand page. */
.iv-side { position: sticky; top: 5.5rem; padding-top: .25rem; }
.iv-side > .k { display: block; margin-bottom: 1.25rem; }
.iv-side .booklet { transform: rotate(-2deg); transform-origin: bottom left; max-width: 34rem; }
.iv-side .booklet .program > *:not(div:first-of-type) { display: none; }
.iv-side .booklet .sheet { max-width: none; margin: 0; border: 0; box-shadow: none; }
.iv-side .booklet .is-editable [data-edit]:hover { background: none; box-shadow: none; }
.fills { list-style: none; margin: 2.25rem 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: 34rem; }
.fills li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.fills li .num { font-style: normal; font-size: 1.05rem; }
.fills li b { color: var(--ink); font-weight: 500; }

.iv-nav { border-top: 1px solid var(--rule); background: var(--paper); position: sticky; bottom: 0; z-index: 5; }
/* The buttons line up with the question column, not the far edge of the page.
   Back is removed from the flow on the first screen, so the forward buttons
   are pinned right rather than left by space-between with one child. */
.iv-nav-row { max-width: var(--iv-col); display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .9rem 0; }
.iv-nav #back { margin-right: auto; }
.iv-nav .right { display: flex; align-items: center; gap: .75rem; }

@media (max-width: 64rem) {
  .iv-grid { grid-template-columns: minmax(0, var(--iv-col)); }
  .iv-side { display: none; }
}

/* Four controls do not fit across a phone: "Show me what you have so far"
   was squeezed into a column one word wide. Below 40rem it takes its own
   line above Back, Skip and Continue, and so does an error. */
.iv-nav #early { white-space: nowrap; }
@media (max-width: 40rem) {
  .iv-nav-row { flex-wrap: wrap; row-gap: 0; }
  .iv-nav .right { display: contents; }
  .iv-nav #early, .iv-nav #error { order: -1; flex-basis: 100%; text-align: left; }
  /* The link's tap area is taller than its words; pull it up into the bar's
     own top padding so the bar grows by one line, not by a button. */
  .iv-nav #early { margin-top: -.4rem; }
  .iv-nav #error:empty { display: none; }
}

/* dictation: a spoken alternative, set on the label's line in the label's
   voice. The padding widens the tap area and the margin takes it back, so the
   line is no taller than a plain label. */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.field-head > label { margin-bottom: 0; }
.voice-btn {
  margin: -.75rem -.35rem -.75rem auto; padding: .75rem .35rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  flex: none; white-space: nowrap;
}
.voice-btn:hover { color: var(--ink); }
.voice-btn:hover .voice-label { text-decoration: underline; text-underline-offset: 3px; }
.voice-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.voice-dot { display: none; width: 7px; height: 7px; margin: 0 4px; border-radius: 50%; background: #b4453b; }
.voice-btn.is-live { color: var(--ink); }
.voice-btn.is-live .voice-icon { display: none; }
.voice-btn.is-live .voice-dot { display: block; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.voice-note { margin: .35rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.voice-note:empty { display: none; }
.voice-note.is-warn { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .voice-btn.is-live .voice-dot { animation: none; } }

/* order of service editor */
.order-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.order-list li { display: grid; grid-template-columns: auto 1fr 1.2fr auto; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.order-list li.is-off { opacity: .45; }
.order-list input[type="text"] { padding: .45rem .55rem; font-size: .95rem; }
.order-list .move { display: flex; flex-direction: column; gap: 2px; }
.order-list input[type="checkbox"] { accent-color: var(--accent); }
.order-list .move button { font: inherit; font-size: .7rem; line-height: 1; padding: .15rem .35rem; background: none; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-3); cursor: pointer; }
.order-list .move button:hover { color: var(--ink); border-color: var(--ink-3); }
@media (max-width: 40rem) {
  .order-list li { grid-template-columns: auto 1fr auto; grid-template-areas: 'chk label move' '. detail detail'; }
  .order-list .o-label { grid-area: label; } .order-list .o-detail { grid-area: detail; } .order-list .move { grid-area: move; }
}

/* trait rows */
.trait-row { display: flex; gap: .5rem; align-items: center; }
.trait-row + .trait-row { margin-top: .6rem; }
.trait-row input { flex: 1; }
.trait-row button { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 1.1rem; padding: 0 .4rem; }
.trait-row button:hover { color: var(--warn); }

/* tone */
.choice-set { display: grid; gap: .6rem; }
.choice {
  /* A label, so it inherits the spaced capitals every field label has; these
     are sentences to read and choose between, not labels. */
  text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); margin-bottom: 0;
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--rule-strong); border-radius: var(--r); padding: .85rem 1rem; cursor: pointer;
  background: var(--paper-2);
}
.choice:hover { border-color: var(--ink-3); }
.choice input { margin-top: .25rem; accent-color: var(--accent); }
.choice.is-on { border-color: var(--accent); background: var(--accent-soft); }
.choice b { display: block; font-weight: 600; font-size: .98rem; }
.choice span { font-size: .88rem; color: var(--ink-2); }

/* Phone: the header has three things in it and only one of them is worth
   space. The save indicator keeps its label for screen readers. */
@media (max-width: 34rem) {
  .iv-top .wrap { display: flex; justify-content: space-between; padding: .75rem 0; }
  .brand { font-size: 1rem; }
  .iv-count { font-size: .66rem; letter-spacing: .12em; }
  .iv-count-eyebrow { display: none; }
  .iv-saved { font-size: 0; }
  .iv-saved::before { width: 7px; height: 7px; }
  .voice-btn { font-size: .95rem; }
  .voice-icon { width: 17px; height: 17px; }
  .voice-note { font-size: .9rem; }
  .iv-nav .wrap { padding: .7rem 0; }
  .iv-nav .btn { padding: .9rem 1.2rem; min-height: 3rem; }
  .iv-nav #early { margin-top: -.75rem; }
  /* Thumb-sized: the arrows, the remove marks and the ticks were 13 to 23
     pixels, and the boxes under 16px made an iPhone zoom in on every tap. */
  .order-list .move button { min-width: 2.75rem; min-height: 2.75rem; font-size: .9rem; }
  .order-list input[type="checkbox"] { width: 1.4rem; height: 1.4rem; }
  .order-list input[type="text"] { font-size: max(16px, 1rem); }
  .trait-row button { min-width: 2.75rem; min-height: 2.75rem; }
}

/* ---------------------------------------------------------------------------
   The first sentence, shown on the dates screen.
   Assembled from what has been typed, no model involved. It is the moment the
   thing stops being a form and starts being an obituary, and it needs to look
   like finished print rather than like a hint.
   --------------------------------------------------------------------------- */
.first-line {
  margin-top: 1.5rem; padding: 1.25rem 1.5rem;
  background: var(--paper-2); border: 1px solid var(--rule);
}
.first-line[hidden] { display: none; }
.first-line-label {
  margin: 0 0 .5rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
}
.first-line-text {
  margin: 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink);
}
.first-line-text:empty { display: none; }
.first-line .hint { margin: .6rem 0 0; }

/* ---------------------------------------------------------------------------
   Choosing a line for the back of the program.
   Closed by default: somebody who already knows the line they want should not
   have to scroll past twenty they do not. Each entry prints its own provenance
   because the checking is the whole reason the list exists.
   --------------------------------------------------------------------------- */
.verse-browse { margin-top: .9rem; }
.verse-browse > summary {
  cursor: pointer; font-size: .9rem; color: var(--accent-ink);
  padding: .4rem 0; list-style: none;
}
.verse-browse > summary::-webkit-details-marker { display: none; }
.verse-browse > summary::before { content: '▸ '; color: var(--ink-3); }
.verse-browse[open] > summary::before { content: '▾ '; }
.verse-browse > summary:hover { text-decoration: underline; }

.verse-list {
  max-height: 26rem; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-2);
  padding: .5rem;
}
.verse-group {
  margin: .75rem .5rem .35rem; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.verse-group:first-child { margin-top: .25rem; }

.verse-pick {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: 0; border-radius: 2px; padding: .55rem .5rem;
}
.verse-pick:hover, .verse-pick:focus-visible { background: var(--accent-soft); }
.verse-text {
  display: block; font-family: var(--serif); font-size: .98rem; line-height: 1.45;
  color: var(--ink); white-space: pre-line;
}
.verse-src { display: block; margin-top: .3rem; font-size: .78rem; color: var(--ink-3); }