/* Urker Spraak correctietool — minimal mobile-first styles for the skeleton.
   Deliberately small: contributor pages must stay light (ADR-014 measures WASM load;
   every KB of CSS counts on a phone). No framework, no MudBlazor here. */

:root {
    --ink: #14181f;
    --ink-soft: #5a6472;
    --sea: #0e4f6e;
    --sea-deep: #093449;
    --paper: #f7f5f1;
    --card: #ffffff;
    --line: #ddd8d0;
    --error: #a4262c;
    --focus: #2b6cb0;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.55;
}

.shell, .admin-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--sea-deep);
    color: #fff;
}

.brand {
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
}

/* Wraps onto a second line on a narrow phone instead of pushing the page sideways. */
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1rem; }
.nav a { color: #dbe9f2; text-decoration: none; font-size: 0.95rem; }
.nav a:hover { text-decoration: underline; }

.content {
    flex: 1;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
}

.footer {
    padding: 1rem;
    color: var(--ink-soft);
    font-size: 0.85rem;
    text-align: center;
    border-top: 1px solid var(--line);
}

h1 { font-size: 1.6rem; margin: 0.5rem 0 0.25rem; }
h2 { font-size: 1.2rem; margin-top: 1.5rem; }

.tagline { color: var(--ink-soft); margin-top: 0; }
/* The version label of the terms, as its own element above the text (AC-1). */
.terms-version {
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0.25rem 0 0;
}
.muted { color: var(--ink-soft); font-size: 0.9rem; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 1rem 1rem 1.25rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

label { font-weight: 600; font-size: 0.9rem; }

input[type="email"], input[type="password"], input[type="text"], input:not([type]) {
    font-size: 1rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    background: #fff;
    color: var(--ink);
    width: 100%;
}

.code-input {
    font-size: 1.6rem !important;
    letter-spacing: 0.35em;
    text-align: center;
}

.validation-message { color: var(--error); font-size: 0.85rem; }

.notice {
    border-radius: 0.4rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
}
.notice.error { background: #fbeaea; color: var(--error); border: 1px solid #e3b8ba; }
.notice.success { background: #ecf5ee; color: #1e6b3a; border: 1px solid #bfe0c8; }
.saved-confirmation { margin: 0.75rem 0 1rem; }
.saved-confirmation:focus { outline: none; }
.saved-confirmation .actions { align-items: center; margin-top: 0.75rem; }

/* The terms text on the consent page: readable as one block, scrollable on a phone. */
.terms-text {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 1rem;
    margin: 1rem 0;
    max-height: 22rem;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.5;
}
.terms-text > :first-child { margin-top: 0; }
.terms-text > :last-child { margin-bottom: 0; }
.terms-text .terms-title { font-size: 1.15rem; margin: 0 0 0.75rem; }
.terms-text h3 { font-size: 1rem; margin: 1.1rem 0 0.35rem; }
.terms-text p { margin: 0 0 0.6rem; }
.terms-text ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.terms-text li { margin-bottom: 0.35rem; }
.terms-text hr { border: 0; border-top: 1px solid var(--line); margin: 0.9rem 0; }
.terms-text code { font-size: 0.85em; }

/* One purpose toggle per row: a one-thumb target with the label next to it. */
.purpose-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.75rem 0; }
.purpose {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 400;
    font-size: 1rem;
    min-height: 44px;
    padding: 0 0.25rem;
}
.purpose input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    accent-color: var(--sea);
    flex-shrink: 0;
}

.button {
    display: inline-block;
    border: 1px solid var(--sea);
    color: var(--sea);
    background: transparent;
    border-radius: 0.45rem;
    padding: 0.65rem 1.1rem;
    font-family: inherit; /* buttons do not inherit the page font by default */
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    min-height: 44px; /* one-thumb target (ADR-014: "met één duim te bedienen") */
}

.button.primary { background: var(--sea); color: #fff; }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The two ways to contribute on the record page: one full-width card-like button each,
   the title on its own line above a short explanation. */
.mode-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.button.mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    width: 100%;
    text-align: left;
    padding: 0.9rem 1.1rem;
    background: var(--card);
}
.button.mode span { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }

.actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }

/* The transcribe page (E8-5): the player on top, then the text field with its buttons
   directly under it, in the normal flow. A sticky block at the bottom edge slipped behind the
   on-screen keyboard on iOS and Chrome, so the buttons stay with the field instead. */
.correction-editor audio { width: 100%; }
.correction-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.correction-text {
    width: 100%;
    min-height: 5.5rem;
    font: inherit;
    font-size: 1rem; /* 16px: iOS Safari does not zoom in on focus */
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    background: #fff;
    color: var(--ink);
    resize: vertical;
}
.correction-text:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.transcribe-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.transcribe-actions .button { flex: 1 1 10rem; }

.help-chapter { margin-bottom: 1.5rem; }
.help-chapter h2 { border-bottom: 1px solid var(--line); padding-bottom: 0.35rem; }

/* The review page (E8-6, ADR-015): the draft under the player as plain, readable text, and
   the three big one-thumb choices in the flow under it — no keyboard until "Klopt bijna"
   flips the same editor into its editable shape (then the .correction-input block above
   takes over and keeps the buttons with the field). */
.correction-review {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.correction-draft-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0;
}
.correction-draft {
    font-size: 1.15rem;
    line-height: 1.6;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
    margin: 0;
}
.review-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
/* The three choices share one row from 360 px: equal widths, and a label that may break
   between words rather than pushing a button onto its own line. */
.review-actions .button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    font-size: 1.05rem;
    overflow-wrap: break-word;
}
.review-reasons { flex-direction: column; }
.review-reasons .button { flex-basis: 100%; text-align: left; }
/* The big play button of the review page (URK-62): there until the clip starts — before the
   first interaction the browser blocks autoplay, and this is the thumb-sized way in. */
.play-button { width: 100%; min-height: 64px; font-size: 1.25rem; margin-top: 0.5rem; }

/* Word chips of the correction editor (RCL) */
.word-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.word {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 0.35rem;
    padding: 0.35rem 0.55rem;
    font-size: 1rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.word.low-confidence { border-color: #d9a441; background: #fdf6e8; }

/* Recording sessions with several participants (E8-12) */
.qr-code { display: block; width: min(16rem, 100%); height: auto; margin: 0.75rem 0; background: #fff; border: 1px solid var(--line); }
.session-code { font-size: 1.25rem; letter-spacing: 0.08em; }
.participant-list { list-style: none; padding: 0; margin: 0.75rem 0; display: grid; gap: 0.4rem; }
.participant {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 0.35rem;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    align-items: center;
}
.participant.ready .participant-status { color: #1e6b3a; font-weight: 600; }
.participant.waiting { border-color: #d9a441; background: #fdf6e8; }

/* Admin: fragment imports (E8-4) */
.bundle-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.bundle-version { font-family: ui-monospace, monospace; min-width: 10rem; }
.imports-table th, .imports-table td { text-align: left; }