/* Phone-first participant flow (voice-app-brt).
 *
 * A participant holds a phone, reads a Burmese question aloud, and taps one
 * control. Everything here serves that: Burmese at reading size, one task per
 * screen, and the record control where a thumb already rests. English stays as
 * a small second line for whoever is helping.
 *
 * Loaded after Bootstrap; the flow screens deliberately opt out of Bootstrap's
 * card/button look rather than fighting it. */

:root {
    --ink: #15211e;
    --ink-soft: #55635e;
    --paper: #f5f7f4;
    --surface: #ffffff;
    --jade: #0f5d4a;
    --jade-deep: #0a4133;
    --cinnabar: #c8341f;
    --thanaka: #e8c86a;
    --mist: #dce3dd;

    --burmese: "Noto Sans Myanmar", "Padauk", "Myanmar Text", "Myanmar Sangam MN", system-ui, sans-serif;
    --latin: system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Nothing a thumb must hit is ever smaller than this. */
    --tap: 3.5rem;
    --gutter: 1.25rem;

    /* How much room the fixed sign-out pill needs kept clear of it, in both
       directions — see the Sign out block below. */
    --sign-out-reserve: 7rem;
}

/* ── Flow shell ─────────────────────────────────────────────────────
   The participant flow owns the whole viewport: no site navbar, no
   footer, nothing to wander off into. */
body.flow {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--latin);
}

body.flow .site-chrome { display: none; }

body.flow main[role="main"],
body.flow .flow-main {
    padding: 0;
}

.screen {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    min-height: 100svh;
    max-width: 34rem;
    margin: 0 auto;
    padding: max(1rem, env(safe-area-inset-top)) var(--gutter)
             calc(1rem + env(safe-area-inset-bottom));
}

/* The strip below is sticky, so it floats over the end of this body. Leave it
   room, or the last controls sit underneath it and a tap hits the strip.
   sticky-foot.js measures the strip and sets the value. */
.screen__body {
    flex: 1 1 auto;
    padding-bottom: var(--foot-clearance, 0px);
}

/* The action zone sits at the bottom, in thumb reach, and stays put. */
.screen__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--paper) 72%, transparent);

    /* Only the controls take taps. The strip's top edge fades to transparent,
       and a see-through pixel must not swallow a tap meant for what's behind it. */
    pointer-events: none;
}

.screen__foot > * { pointer-events: auto; }

/* ── Type ───────────────────────────────────────────────────────────
   Burmese leads at reading size. The script stacks marks above and
   below the line, so it needs far more line-height than Latin. */
.my {
    font-family: var(--burmese);
    line-height: 1.9;
}

.en {
    font-family: var(--latin);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.question {
    font-family: var(--burmese);
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.95;
    font-weight: 600;
    margin: 0.5rem 0 0;
    color: var(--ink);
}

.instruction { margin: 0; }
.instruction .my { font-size: 1.0625rem; color: var(--ink-soft); }

/* ── Sign out ───────────────────────────────────────────────────────
   The one control that has to be reachable from every screen without
   belonging to any of them (voice-app-09c7). Fixed to the corner rather
   than placed in the page: the flow's screens are each their own
   full-height layout, and the navbar that would otherwise hold it is
   display:none for the whole flow.

   Deliberately smaller than --tap, which is the only thing here that is.
   That floor exists for controls a thumb MUST hit; this is one a thumb
   must be able to find and had better not hit by accident, so it is sized
   to the accessible minimum (2.75rem) rather than to the reading-distance
   one — and sign-out.js asks before it fires. */
.sign-out {
    position: fixed;
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
    z-index: 20;
    margin: 0;
}

.sign-out__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--mist);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    line-height: 1.2;
}

.sign-out__button:active { background: #eef3ef; }
.sign-out__button .my { font-size: 0.9375rem; line-height: 1.5; }
.sign-out__button .en { font-size: 0.625rem; line-height: 1; }

/* The screens start their content at the very top, so without this the pill
   lands on whatever heading the screen leads with. */
body.flow.has-sign-out .screen {
    padding-top: calc(max(1rem, env(safe-area-inset-top)) + var(--sign-out-reserve) / 2);
}

/* Off the flow, the navbar is rendered and its toggler sits at the right on a
   narrow screen — which is exactly where the pill is. Move the navbar's own
   contents out from under it rather than moving the pill, since "upper right
   corner, every page" is the whole point of the control. */
body:not(.flow).has-sign-out .navbar > .container {
    padding-right: var(--sign-out-reserve);
}

/* ── Progress ───────────────────────────────────────────────────────
   A rail of one dot per question: how far in, and how much is left,
   in a single glance. */
.progress-rail {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin: 0 0 0.5rem;
}

.progress-rail__dot {
    flex: 1 1 auto;
    height: 0.25rem;
    border-radius: 999px;
    background: var(--mist);
}

.progress-rail__dot.is-done { background: var(--jade); }
.progress-rail__dot.is-current { background: var(--thanaka); }

.progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.progress-label .my { font-size: 1rem; font-weight: 600; }
.progress-label .identity {
    font-family: var(--latin);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

/* ── Choices (category / topic / question lists) ────────────────────── */
.choice-list { display: flex; flex-direction: column; gap: 0.625rem; }

.choice {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: 0.875rem 1rem;
    border: 1px solid var(--mist);
    border-left: 4px solid var(--jade);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    font: inherit;
}

.choice:active { background: #eef3ef; }
.choice .my { font-size: 1.125rem; display: block; }
.choice .en { display: block; }

/* Already sent (2026-08-10). A statement this participant has recorded before
   used to stay tappable, on the reasoning that "the upload itself is what
   refuses a second take". It does refuse it — and says nothing: the refusal
   comes back as a 409 that the upload manager reads as "already saved", so the
   participant is told their reading was uploaded when it was never stored, and
   then offered the wrong audio to keep. There is nothing that screen can do for
   them, so wizard.js now disables the row as well as marking it.

   Deliberately not `opacity`, which was the first shape tried: it fades the
   mark along with everything else, and the mark is the part that has to survive
   a cheap screen in daylight. A tinted row and a darker jade edge instead, with
   the words at full strength on top. The words are wizard.js's, not a CSS
   `content` tick — generated content is announced inconsistently, and this
   study's participants include people who will hear this page rather than read
   it. */
.choice--done { background: #eef3ef; border-left-color: var(--jade-deep); }

/* A disabled row must still be readable. Browsers grey a disabled button out
   by default, which would take the mark down with it — the same failure the
   `opacity` note above rejects, arriving from the user agent instead of from
   here. Stated explicitly so it cannot. */
.choice:disabled { color: var(--ink); opacity: 1; cursor: default; }

.choice__done {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--burmese);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--jade-deep);
}

/* The same sentence again, on a category row rather than under a heading.
   Picked out for the reason .choice__done above is: this is the line that says
   which topics are still untouched, and it has to survive a cheap screen in
   daylight. Burmese leads it, so it needs the Burmese stack and its
   line-height — .en, the class a row's second line uses, gives neither and
   would render this identically to the prompt count above it. */
.choice__count {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--burmese);
    line-height: 1.9;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--jade-deep);
}

/* The same count over the whole list, under the step's own heading. */
.statement-progress { color: var(--jade-deep); font-weight: 600; }

/* Categories and topics only exist in English in the topic data, so there is
   no Burmese line to lead with — that row reads at full size instead. */
.choice__label {
    display: block;
    font-family: var(--latin);
    font-size: 1.0625rem;
    line-height: 1.4;
}

/* ── The record stone ───────────────────────────────────────────────
   One control, thumb-sized. Jade at rest; while recording it turns
   cinnabar and breathes, so "is it recording?" never has to be asked. */
.stone {
    width: 7.25rem;
    height: 7.25rem;
    border: none;
    border-radius: 50%;
    background: var(--jade);
    color: #fff;
    font-family: var(--burmese);
    font-size: 1.125rem;
    line-height: 1.4;
    box-shadow: 0 0.5rem 1.25rem rgba(15, 93, 74, 0.28);
    display: grid;
    place-content: center;
    gap: 0.125rem;
}

.stone:disabled { background: var(--mist); color: var(--ink-soft); box-shadow: none; }
.stone .en { color: rgba(255, 255, 255, 0.82); }
.stone:disabled .en { color: var(--ink-soft); }

.stone--stop { background: var(--cinnabar); box-shadow: 0 0.5rem 1.25rem rgba(200, 52, 31, 0.3); }

/* Recording: the ring breathes and the screen takes a cinnabar edge. */
.is-recording .stone--stop { animation: breathe 1.6s ease-in-out infinite; }

.recording-frame {
    position: fixed;
    inset: 0;
    border: 3px solid var(--cinnabar);
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}

.is-recording .recording-frame { opacity: 1; }

@keyframes breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 52, 31, 0.45); }
    50% { box-shadow: 0 0 0 1.125rem rgba(200, 52, 31, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .is-recording .stone--stop { animation: none; box-shadow: 0 0 0 0.5rem rgba(200, 52, 31, 0.35); }
    .recording-frame { transition: none; }
}

/* ── Level meter ────────────────────────────────────────────────────
   Two real recordings arrived about a tenth of normal speaking loudness,
   and nothing after the fact can fix that. So while the microphone is
   open the participant gets to see their own voice, with a tick marking
   the point they need to get past. guided-flow.js places the tick, so
   the mark and the too-quiet test can never drift apart. */
.meter {
    position: relative;
    width: 100%;
    height: 0.75rem;
    border-radius: 0.375rem;
    background: var(--mist);
    overflow: hidden;
}

.meter__fill {
    height: 100%;
    width: 0;
    border-radius: 0.375rem;
    background: var(--jade);
}

.meter__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--ink);
    opacity: 0.55;
}

/* ── Actions ────────────────────────────────────────────────────────── */
.action {
    width: 100%;
    min-height: var(--tap);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font: inherit;
    text-align: center;
}

.action .my { display: block; font-size: 1.125rem; font-weight: 600; }
.action--primary { background: var(--jade); color: #fff; }
.action--primary:disabled { background: var(--mist); color: var(--ink-soft); }
.action--primary .en { color: rgba(255, 255, 255, 0.85); }
.action--primary:disabled .en { color: var(--ink-soft); }
.action--quiet { background: var(--surface); border-color: var(--mist); color: var(--ink); }

.action-row { display: flex; gap: 0.625rem; width: 100%; }
.action-row .action { flex: 1 1 0; }

.link-back {
    background: none;
    border: none;
    padding: 0.5rem 0;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.9375rem;

    /* Burmese hangs marks below the line, and the default underline sits
       straight through them. Drop it clear rather than removing it: on a link
       whose label is half Burmese, the underline is what says it is a link. */
    text-underline-offset: 0.3em;
}

.link-back .my { line-height: 1.5; }

/* ── A document, not a flow screen ──────────────────────────────────
   Styles the privacy and terms pages (voice-app-c5a), read top to bottom
   rather than acted on. English here is the second half of a legal text
   somebody may be checking a detail in, not the helper line under a
   Burmese instruction, so it comes up to reading size. */
.doc .en { font-size: 0.9375rem; line-height: 1.6; }
.doc .my { font-size: 1.0625rem; }

/* On a phone this does nothing — the screen is already narrower. It is for
   the privacy page, which is the one document reached from the site chrome
   rather than the flow, and on a desktop would otherwise run its sentences
   the full width of the window. A line you lose your place in is a line
   nobody finishes, and this is a page written to be read to the end. */
.doc { max-width: 46rem; }

.doc__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.375rem;
}

.doc section + section { margin-top: 0.5rem; }
.doc ul { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.doc ul + p { margin-top: 0.5rem; }
.doc p + p { margin-top: 0.5rem; }

/* Where the Burmese half of a section ends and the English half begins.
   Without the break, English bullets under Burmese ones read as sub-points
   of the last Burmese one rather than the same list said again. */
.doc .my + .en { margin-top: 0.875rem; }

/* ── Notices ────────────────────────────────────────────────────────
   A blocked microphone is the difference between taking part and
   giving up, so it gets the whole screen's attention, not a grey line. */
.notice {
    border-radius: 0.5rem;
    padding: 1rem;
    border-left: 4px solid var(--mist);
    background: var(--surface);
}

.notice .my { font-size: 1.0625rem; font-weight: 600; }
.notice .en { margin-top: 0.25rem; }

/* The live status line under the record button. Both languages stack, and an
   empty one takes no room — the strip is usually silent, and a blank Burmese
   line would push the buttons down every time it cleared. */
.status .my,
.status .en { display: block; }
.status .my:empty,
.status .en:empty { display: none; }
.notice--stop { border-left-color: var(--cinnabar); background: #fdf1ef; }
.notice--wait { border-left-color: var(--thanaka); background: #fdf8ec; }
.notice--good { border-left-color: var(--jade); background: #eef5f1; }

.notice__address {
    display: block;
    margin-top: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    background: #fff;
    border: 1px dashed var(--mist);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
    color: var(--ink);
}

/* ── Access code entry ──────────────────────────────────────────────── */
.code-input {
    width: 100%;
    min-height: 4rem;
    border: 2px solid var(--mist);
    border-radius: 0.5rem;
    background: var(--surface);
    text-align: center;
    font-family: var(--latin);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    color: var(--ink);
}

.code-input:focus { outline: none; border-color: var(--jade); }

/* Keyboard users must be able to see where they are. */
.choice:focus-visible,
.action:focus-visible,
.stone:focus-visible,
.link-back:focus-visible,
.code-input:focus-visible {
    outline: 3px solid var(--thanaka);
    outline-offset: 2px;
}

.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.hidden { display: none !important; }