* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Instructions / Landing */
.instructions {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.instructions h1 {
    margin-bottom: 1rem;
    color: #1a1a2e;
}

.instructions h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.instructions ol,
.instructions ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.instructions li {
    margin-bottom: 0.5rem;
}

kbd {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn:hover {
    background: #f0f0f0;
}

.btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-primary:disabled {
    background: #93c5fd;
    border-color: #93c5fd;
    cursor: not-allowed;
}

.btn-container {
    margin-top: 2rem;
    text-align: center;
}

.btn-choice.selected,
.btn-suspiciousness.selected,
.btn-confidence.selected,
.btn-action.selected {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.confidence-scale {
    display: flex;
    gap: 0.5rem;
}

/* Audio-target task bar */
.audio-target-bar {
    background: #1a1a2e;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.audio-target-accuracy {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.audio-target-acc-good {
    color: #22c55e;
}

.audio-target-acc-warn {
    color: #f59e0b;
}

.audio-target-acc-bad {
    color: #ef4444;
}

.audio-target-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse 2.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Tutorial */
.tutorial-container {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.audio-target-display {
    padding: 2rem;
}

.audio-target-status {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Set when the tab was backgrounded mid-task (timers throttle there, so the
   2.5s letter stream drifts). Cleared on the next spoken letter. */
.audio-target-status-warn {
    color: #b45309;
}

/* Audio could not be spoken at all (blocked by the browser, or muted device).
   Loud on purpose: a silent audio task otherwise looks like a working one. */
.audio-problem {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    color: #991b1b;
    font-weight: 500;
}

/* End-of-task upload notice: one POST per spoken letter takes a few seconds,
   and a blank frozen page invites a close or a re-click. */
.task-saving {
    max-width: 640px;
    margin: 3rem auto;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    font-size: 1.05rem;
}

.task-saving-note {
    margin-top: 0.5rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.audio-target-feedback {
    margin-top: 1rem;
    font-size: 1.1rem;
    min-height: 1.5rem;
}

.audio-target-feedback.correct {
    color: #22c55e;
}

.audio-target-feedback.incorrect {
    color: #ef4444;
}

/* Email display */
.task-container {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.email-display {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.email-header {
    background: #f8f9fa;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

.email-from,
.email-subject {
    margin-bottom: 0.25rem;
}

.email-address {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.email-body {
    padding: 1.5rem;
    min-height: 150px;
    line-height: 1.7;
}

.email-body img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}

/* Response area */
.response-area {
    margin-top: 1rem;
}

.response-section {
    margin-bottom: 1.5rem;
}

.response-section h3 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: #555;
}

/* Two-column task layout: email on the left, questions on the right.
   minmax(0, 1fr) keeps the email's wide HTML tables from forcing the
   column wider than its share. Columns are top-aligned and independent. */
.task-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.task-split .email-display {
    margin-bottom: 0;
}

.task-split .response-area {
    margin-top: 0;
    position: sticky;
    top: 1rem;
    /* Keep the questions in view on tall emails. Cap to the viewport and
       scroll internally only if the panel is taller than the screen, so the
       "Next Email" button is always reachable on short displays. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1.25rem;
}

/* The study is desktop-only, but stack gracefully on narrow viewports
   so the questions never get crushed beside the email. */
@media (max-width: 900px) {
    .task-split {
        grid-template-columns: 1fr;
    }
    .task-split .email-display {
        margin-bottom: 1.5rem;
    }
    .task-split .response-area {
        position: static;
        background: transparent;
        border: none;
        padding: 0;
    }
}

/* Cue-rating page: the 7-point rows use a .likert-anchor-row pinned below
   the chips instead of inline anchors, so nothing needs to wrap here. */

/* Progress bar */
.progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin-top: 1.5rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 3px;
    transition: width 0.3s;
}

.progress-text {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
}

/* Manipulation check */
.check-container {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.check-container h2 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.scale-item {
    margin-bottom: 1.5rem;
}

.scale-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #111;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Inline note for scales whose anchors run opposite to their neighbors
   (e.g. the canonical NASA-TLX Performance item: Good -> Poor). */
.scale-direction-note {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: #b45309;
    margin-top: 0.15rem;
}

.scale-item input[type="range"] {
    width: 100%;
}

.check-container .confidence-scale {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.check-container .confidence-scale label {
    font-weight: normal;
}

.likert-item {
    margin-bottom: 1.5rem;
}

.likert-item > label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.likert-scale {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.likert-scale label {
    font-weight: normal;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    min-width: 2.75rem;
    justify-content: center;
    transition: background-color 0.15s, border-color 0.15s;
    user-select: none;
}

.likert-scale label:hover {
    background: #f0f4ff;
    border-color: #4a90e2;
}

.likert-scale label:has(input[type="radio"]:checked) {
    background: #4a90e2;
    border-color: #4a90e2;
    color: #fff;
}

.likert-scale input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
    margin: 0;
}

.likert-anchor {
    font-size: 0.8rem;
    color: #111;
    font-weight: 600;
    min-width: 5rem;
}

/* Anchor row pinned under the Likert chips (cue-rating page): endpoints
   labeled on a single line directly below the scale, so the anchors never
   wrap into odd positions beside the radios. */
.likert-anchor-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #111;
    font-weight: 600;
    margin-top: 0.35rem;
}

.text-item {
    margin-bottom: 1.5rem;
}

.text-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.text-item textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}

/* Scam-victimization block */
.victim-intro {
    color: #444;
    margin-bottom: 1rem;
}

/* Scam-definition glossary removed; definitions are now inline bold labels on
   each victim-item question (no click-to-expand). */

.victim-item {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.victim-q {
    font-weight: 500;
    margin-bottom: 0.6rem;
}

/* Frequency band: a wrapping row of bordered radio chips (mirrors .likert-scale) */
.freq-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.freq-scale label,
.outcome-scale label {
    font-weight: normal;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.freq-scale label:hover,
.outcome-scale label:hover {
    background: #f0f4ff;
    border-color: #4a90e2;
}

.freq-scale label:has(input:checked),
.outcome-scale label:has(input:checked) {
    background: #4a90e2;
    border-color: #4a90e2;
    color: #fff;
}

.freq-scale input[type="radio"],
.outcome-scale input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    margin: 0;
}

/* Outcome follow-up: longer prose labels, so stack them vertically */
.outcome-followup {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-left: 3px solid #4a90e2;
    border-radius: 4px;
}

.outcome-q {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.5rem;
}

.outcome-scale {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.other-text {
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}

/* Exact-count follow-up: shown only for the open-ended "More than 3 times"
   band. Sits between the band chips and the outcome follow-up, styled lighter
   than .outcome-followup so the two nested follow-ups stay distinguishable. */
.count-followup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.7rem;
    padding: 0.6rem 0.85rem;
    background: #fffbeb;
    border-left: 3px solid #f0b429;
    border-radius: 4px;
}

/* An author `display` declaration outranks the UA sheet's [hidden]{display:none},
   so without this the JS-controlled `hidden` attribute would do nothing and every
   count box would be visible from the start. */
.count-followup[hidden] {
    display: none;
}

.count-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
}

.count-input {
    width: 6.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}

.count-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25);
}

.victim-gate {
    padding: 1rem 1.25rem;
    background: #eef2f7;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.victim-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
}

/* Complete page */
.complete-container {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.complete-container h1 {
    color: #22c55e;
    margin-bottom: 1rem;
}

.pid-display {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #888;
}

/* Open-ended feedback box at the end of /victimization */
.victim-feedback {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.victim-feedback h2 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.victim-feedback label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.victim-feedback textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.victim-feedback textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25);
}

.victim-feedback-note {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Completion-page scorecard (primary-task accuracy fed back to the participant) */
.score-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 32rem;
    text-align: left;
}

.score-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0369a1;
}

.score-headline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.score-pct {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #0369a1;
}

.score-sub {
    font-size: 1rem;
}

.score-breakdown {
    margin: 0 0 0 1.25rem;
    padding: 0;
    font-size: 0.95rem;
    color: #444;
}

.score-breakdown li {
    margin-bottom: 0.25rem;
}

/* Bonus outcome, shown under the accuracy breakdown. The bonus is announced
   before the task, so the participant is told here whether they qualified
   rather than inferring it from a payment days later. */
.score-bonus {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #bae6fd;
}

/* A two-part run shows no overall score, so the reward section follows the
   heading directly and needs no divider. */
.score-card h2 + .score-bonus {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.score-bonus-total {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

/* Lead-in above the requirement ticks. Carries the "both were needed" framing
   for the treatment arm, so a row of ticks beside one dollar doesn't read as
   two bonuses that were underpaid. */
.score-bonus-req {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    color: #555;
}

.score-bonus .score-breakdown {
    list-style: none;      /* the tick / cross is the marker */
    margin-left: 0;
}

.score-bonus-note {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: #555;
}

/* Course-points breakdown (two-part students): one award per row, each part's
   requirements indented beneath it with their own tick, the total last. */
.points-list > li {
    margin-bottom: 0.5rem;
}

.points-detail {
    list-style: none;
    margin: 0.2rem 0 0 1.4rem;
    padding: 0;
    font-size: 0.9rem;
    color: #555;
}

.points-detail li {
    margin-bottom: 0.15rem;
}

.points-total {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid #bae6fd;
    font-size: 1.05rem;
}

@media (max-width: 480px) {
    .score-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

/* IRB information sheet (welcome page + standalone /information-sheet) */
.info-sheet {
    border: 1px solid #d7dce3;
    border-radius: 8px;
    background: #fdfdfd;
    padding: 1.5rem 1.75rem;
    margin: 1.25rem 0;
    font-size: 0.95rem;
}

.info-sheet h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    color: #1a1a2e;
}

.info-sheet h3:first-of-type {
    margin-top: 0;
}

.info-sheet p {
    margin-bottom: 0.75rem;
}

.info-sheet ul {
    margin: 0 0 0.75rem 1.5rem;
}

.info-sheet li {
    margin-bottom: 0.35rem;
}

.info-sheet-consent {
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    background: #eef2f7;
    border-left: 4px solid #2563eb;
    border-radius: 4px;
    font-weight: 600;
}

.info-sheet-keep {
    margin-bottom: 0 !important;
    font-size: 0.9rem;
    color: #6b7280;
}

.info-sheet-print-bar {
    margin-top: 0 !important;
    text-align: right;
}

@media print {
    body {
        background: #fff;
    }

    .container {
        padding: 0;
        max-width: none;
    }

    .info-sheet-page {
        box-shadow: none;
        padding: 0;
    }

    .info-sheet {
        border: none;
        background: #fff;
        padding: 0;
    }

    .info-sheet-print-bar {
        display: none;
    }
}