/* ============================================================
   psurvey — survey flow
   The pre-identity tunnel: context → 20 questions → mid-journey
   pauses → save-results identity capture.
   Shipped pages: /context.php, /question.php, /midjourney.php,
                  /save-results.php
   ============================================================ */

/* ============================================================
   Context (Frame 2)
   ============================================================ */

.context-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 4px 24px;
}

.context-body .section-label {
    margin-bottom: 4px;
}

.context-prompt {
    font-family: var(--title);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    /* Frame 2 prompt is mixed-case, not the uppercase of standard h1 */
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin-top: 8px;
    margin-bottom: 14px;
}

.context-note {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 22px;
}

.context-input {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    background: var(--bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.context-input:focus {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px var(--green-faint);
}
.context-input::placeholder {
    color: var(--ink-light);
    font-style: italic;
}

.context-hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-light);
}

/* ============================================================
   FS-031 — the accordion: five spheres, fifteen leaves (REL-016)

   The example chips went with the text box they used to fill. The shape is the
   prototype's (docs/features/prototypes/FS-031-context-taxonomy.html): a sphere
   opens, its leaves appear, one is chosen, and where the leaf allows it a
   checkbox is attached to that leaf's lower edge — INSIDE the thing it is about,
   so a pick and "do you lead it" read as one answer rather than two.

   The radios and checkboxes are the real controls, visually hidden: the label
   IS the button. So it is keyboard-operable and screen-reader-legible for free,
   and it works with JavaScript switched off.
   ============================================================ */
.acc { display: grid; gap: 6px; margin-top: 4px; }

.sphere {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    overflow: hidden;
}
.sphere[open] { border-color: var(--green-pale); box-shadow: 0 0 0 2px var(--green-faint); }
.sphere > summary {
    padding: 10px 12px;
    cursor: pointer;
    display: grid;
    gap: 1px;
    list-style: none;          /* the default triangle, in every engine */
}
.sphere > summary::-webkit-details-marker { display: none; }
.sphere > summary:hover { background: var(--bg-alt); }
.sphere > summary:focus-visible { outline: 3px solid var(--green-main); outline-offset: -3px; }
.sphere .sname { font-family: var(--title); font-weight: 700; font-size: 15px; color: var(--ink); }
.sphere .sdesc { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

.leaves { display: grid; gap: 4px; padding: 2px 10px 10px; }
.leaf-wrap { display: grid; }
.leaf {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    display: grid;
    gap: 1px;
    transition: background 0.13s ease, border-color 0.13s ease;
}
.leaf:hover { border-color: var(--green-pale); background: var(--bg); }
.leaf .lname { font-size: 13px; font-weight: 500; color: var(--ink); }
.leaf .lsub  { font-size: 11.5px; color: var(--ink-soft); }

/* The control itself is off-screen rather than display:none, which would take it
   out of the tab order and out of the accessibility tree with it. */
.leaf-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.leaf-wrap.is-on .leaf { background: var(--green-faint); border-color: var(--green-main); }
.leaf-wrap.is-on .leaf .lname { font-weight: 700; }
.leaf-r:focus-visible + .lname { outline: 3px solid var(--green-main); outline-offset: 3px; }

/* Attached to the chosen leaf: no gap, no top border, and the leaf's own corners
   squared off where they meet. Hidden until that leaf is the one chosen — by
   :has() where it exists, and by the class context.js sets where it does not. */
.leadrow { display: none; }
.leaf-wrap.is-on .leadrow,
.leaf-wrap:has(.leaf-r:checked) .leadrow {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: -4px;
    padding: 2px 10px 9px;
    background: var(--green-faint);
    border: 1px solid var(--green-main);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
}
.leaf-wrap.is-on .leaf,
.leaf-wrap:has(.leaf-r:checked) .leaf {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 6px;
}
.leadrow input { margin: 2px 0 0; accent-color: var(--green-main); width: 15px; height: 15px; flex: 0 0 auto; }
.leadrow .lt { font-size: 12.5px; font-weight: 500; color: var(--ink); }

/* The same checkbox on the locked screen an invited member sees: there is no leaf
   to attach it to there, so it stands on its own. */
.leadrow--locked {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 10px 12px;
    background: var(--green-faint);
    border: 1px solid var(--green-pale);
    border-radius: 8px;
    cursor: pointer;
}

/* Step 2's read-only summary of what they chose, with the way back to change it. */
.context-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 12px;
    background: var(--green-faint);
    border: 1px solid var(--green-pale);
    border-radius: 8px;
}
.context-chosen b  { font-size: 13.5px; font-weight: 700; color: var(--ink); display: block; }
.context-chosen em { font-size: 11.5px; font-style: normal; color: var(--ink-soft); display: block; margin-top: 1px; }
.context-chosen a  { font-size: 12px; color: var(--green-dark); white-space: nowrap; }

/* ============================================================
   FS-032 — the closing reflection (REL-016)
   ============================================================ */
.reflect-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 4px 24px;
}
.reflect-prompt {
    font-family: var(--title);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    text-transform: none;
    color: var(--ink);
    margin: 8px 0 10px;
}
.reflect-intro { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; }
/* 160px at rest, and it grows rather than scrolling: a generous box measurably
   lifts the quality of what people write (FS-032 §4.3). */
.reflect-box {
    width: 100%;
    min-height: 160px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reflect-box:focus { border-color: var(--green-main); box-shadow: 0 0 0 3px var(--green-faint); }
.reflect-box::placeholder { color: var(--ink-light); font-style: italic; }
.reflect-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-light);
}
.reflect-count { font-variant-numeric: tabular-nums; }
/* Skip sits left and quiet; Continue keeps the right (FS-032 §4.1). */
.reflect-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }   /* one button since REL-024, on the right (Pete) */
.btn-quiet {
    background: none;
    border: 0;
    padding: 8px 2px;
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.btn-quiet:hover, .btn-quiet:focus { color: var(--ink); }

/* Continue, before a leaf is chosen. `required` on the radios says the same to a
   browser with no JavaScript; this is what it looks like. */
.btn-primary[disabled] { background: var(--line); color: var(--ink-light); cursor: not-allowed; }
.btn-primary[disabled]:hover { background: var(--line); }

.form-error {
    margin-top: 14px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 6px;
    background: var(--yellow-faint);
    border-left: 3px solid var(--yellow-main);
    color: var(--ink-mid);
}

/* ============================================================
   FS-031 — what they are answering for, above the question (REL-016)

   Question 1 carries both halves; from question 2 it is a chip. The prototype's
   shape: a green edge and a tinted panel for the first, a dot and a line of grey
   for the rest.
   ============================================================ */
.q-answering {
    /* Pete, 2026-09-16: "there needs to be a bit more space in the survey between
       context and attribute label." 2px had them touching. */
    margin: 14px 0 18px;
    border-left: 3px solid var(--green-main);
    background: var(--green-faint);
    border-radius: 0 8px 8px 0;
    padding: 9px 12px;
}
.q-answering-k {
    display: block;
    font-family: var(--title);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10px;
    font-weight: 700;
    color: var(--green-dark);
}
.q-answering b {
    display: block;
    font-family: var(--title);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 2px;
    color: var(--ink);
}
.q-answering-ctx { display: block; font-size: 12px; color: var(--ink-mid); }
/* From question 2 the context shares the attribute's line, set EXACTLY the same
   way — green, small, capitalised — and pushed right (Pete, 2026-09-16: alone
   above the heading "it looks odd by itself"). The only difference is where it
   sits: one is what the question is about, the other is who it is about. On a
   narrow screen it wraps under the attribute rather than squeezing it. */
.q-attr-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.q-attr-row .q-attr-label { margin-bottom: 0; }
.q-attr-ctx {
    /* 2026-10-12 (Pete) — on the left now, alone on its line: "Context: <type> – <name>". */
    overflow-wrap: anywhere;
}
.q-attr-spacer { visibility: hidden; }   /* question 1: the line's space, kept */

/* ============================================================
   Question (Frame 3) — 7-dot paired-pole scale
   ============================================================ */

/* The shared t2-header chrome (progress bar + back link + counter) lives
   in main.css now so midjourney.php can reuse it. This file only carries
   the question-specific body styles. */

/* ===== Question body ===== */
.q-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 0 16px;
}

.q-attr-label { margin-bottom: 6px; }

.q-stem {
    font-family: var(--title);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0.005em;
    color: var(--ink);
    margin-bottom: 18px;
}

/* 7-column grid: pole cards span cols 1-3 and 5-7 on the first row; the six circles and the gap
   between them auto-flow into row 2 (col 4 is empty in both rows). Since 2026-10-14 (Pete) there is no
   middle circle, and col 4 is three quarters of a column: the gap between the sides is about 25% narrower,
   and each statement's box a little wider. */
.q-v4-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 0.75fr repeat(3, 1fr);
    column-gap: 4px;
    row-gap: 14px;
    align-items: start;
    margin-top: 4px;
}
.q-v4-card {
    padding: 12px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ink);
    min-height: 88px;
    display: flex;
    align-items: center;
}
.q-v4-card.left {
    grid-column: 1 / span 3;
    background: var(--yellow-tint);
    border: 1px solid var(--yellow-pale);
    border-left: 3px solid var(--yellow-main);
}
.q-v4-card.right {
    grid-column: 5 / span 3;
    background: var(--blue-tint);
    border: 1px solid var(--blue-pale);
    border-right: 3px solid var(--blue-main);
}

.q-v4-dot {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== Dots ===== */
.q-dot {
    border-radius: 50%;
    border: 2px solid;
    background: #fff;
    cursor: pointer;
    position: relative;
    z-index: 2;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.q-dot:hover { transform: scale(1.08); }
/* 2026-10-14 (Pete, option B) — feedback: "it wasn't obvious they could choose the circles". Under the
   pointer, or while a finger is on it, a circle shades in its side's colour, lighter than chosen. */
.q-dot.d1:not(.selected):hover, .q-dot.d2:not(.selected):hover, .q-dot.d3:not(.selected):hover,
.q-dot.d1:not(.selected):active, .q-dot.d2:not(.selected):active, .q-dot.d3:not(.selected):active { background: rgba(239, 194, 52, 0.28); }
.q-dot.d5:not(.selected):hover, .q-dot.d6:not(.selected):hover, .q-dot.d7:not(.selected):hover,
.q-dot.d5:not(.selected):active, .q-dot.d6:not(.selected):active, .q-dot.d7:not(.selected):active { background: rgba(61, 140, 199, 0.22); }
/* ...and the statement on its side lights (question.js sets .lit). */
.q-v4-card { transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.q-v4-card.left.lit  { background: var(--yellow-faint); border-color: var(--yellow-light); box-shadow: 0 0 0 2px rgba(239, 194, 52, 0.25); }
.q-v4-card.right.lit { background: var(--blue-faint);   border-color: var(--blue-light);   box-shadow: 0 0 0 2px rgba(61, 140, 199, 0.2); }
/* The words for the circle under the pointer, or the chosen one: "Much more like “…”". */
.q-strength { grid-column: 1 / -1; text-align: center; font-size: 12px; line-height: 1.4; color: var(--ink-soft); min-height: 17px; margin-top: -6px; }
.q-strength b { color: var(--ink); font-weight: 500; }
.q-dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 161, 47, 0.3);
}

.q-dot.d1 { width: 28px; height: 28px; border-color: var(--yellow-main); }
.q-dot.d2 { width: 24px; height: 24px; border-color: var(--yellow-light); }
.q-dot.d3 { width: 20px; height: 20px; border-color: var(--yellow-pale); }
.q-dot.d5 { width: 20px; height: 20px; border-color: var(--blue-pale); }
.q-dot.d6 { width: 24px; height: 24px; border-color: var(--blue-light); }
.q-dot.d7 { width: 28px; height: 28px; border-color: var(--blue-main); }

/* Selected — yellow side and blue side; halo color picks up the side */
.q-dot.selected.d1 { background: var(--yellow-main);  box-shadow: 0 0 0 4px rgba(239, 194, 52, 0.18); }
.q-dot.selected.d2 { background: var(--yellow-light); box-shadow: 0 0 0 4px rgba(239, 194, 52, 0.18); }
.q-dot.selected.d3 { background: var(--yellow-pale);  box-shadow: 0 0 0 4px rgba(239, 194, 52, 0.18); }
.q-dot.selected.d5 { background: var(--blue-pale);    box-shadow: 0 0 0 4px rgba(61, 140, 199, 0.18); }
.q-dot.selected.d6 { background: var(--blue-light);   box-shadow: 0 0 0 4px rgba(61, 140, 199, 0.18); }
.q-dot.selected.d7 { background: var(--blue-main);    box-shadow: 0 0 0 4px rgba(61, 140, 199, 0.18); }

/* The first question's note on what the buttons mean (question.php). */
.q-showme { color: var(--green-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.q-help {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-mid);
    text-align: center;
}

.q-message {
    margin-top: 18px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 6px;
    background: var(--yellow-faint);
    border-left: 3px solid var(--yellow-main);
    color: var(--ink-mid);
}

/* ============================================================
   Mid-journey pauses (after Q5, Q10, Q15)

   ⚠ THIS BLOCK WAS DEAD. A second line of equals-signs-and-comment-close sat
   here, after the one that ends the heading. The first closed the comment; the
   second was garbage in CSS context, and a browser recovering from garbage skips
   to the end of the next rule — so .pause-body was thrown away entirely. Every
   pause has been rendering with NO padding and NO tint since these rules were
   written, which is why the gap above "Worth noticing" never matched the
   questions' (Pete, 2026-09-16) whatever the padding said.

   Found by measuring rather than reading: getComputedStyle reported padding-top
   0px, and document.styleSheets held no .pause-body rule at all, while the file
   plainly had one.
   ============================================================ */

.pause-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* ⚠ 14px above, the same as .q-body — Pete, 2026-09-16: the gap between the
       progress bar and the section label must read the same on a pause as it does
       on a rating question, and the rating page is the one that is right. It was
       28px here, so every pause sat lower than the twenty screens around it. */
    /* Set exactly like a question's body: same top gap, same left edge, no ground
       of its own (Pete, 2026-09-16: "the pause page now has a gray background the
       rating pages don't have"). The tinted full-bleed panel these rules used to
       carry had never once been drawn — the dead block above is why — so it
       arrived as a change nobody had asked for the moment the rule came alive.
       A pause is a quiet screen between questions, not a different surface. */
    padding: 14px 0 20px;
}

.pause-label {
    margin-bottom: 12px;
}

.pause-text {
    font-family: var(--title);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin-bottom: 16px;
}

.pause-note {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-mid);
    margin-bottom: 16px;
}
.pause-note p + p { margin-top: 10px; }
.pause-note em {
    font-style: normal;
    color: var(--ink);
    font-weight: 500;
}

/* ============================================================
   Save-results (Frame 5) — identity capture + OTP code entry

   ⚠ The same duplicated terminator was here too, and it had been eating .id-body
   the same way. Two blocks, one typo, both dead.
   ============================================================ */

.id-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 10px 24px;
}

.id-body .step[hidden] { display: none; }

.id-label {
    margin-bottom: 8px;
}

.id-head {
    font-family: var(--title);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin-bottom: 8px;
}

.id-sub {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 22px;
    line-height: 1.5;
}

.id-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.id-field { margin-bottom: 14px; }

.id-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: 5px;
    font-weight: 500;
}

.id-field input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    background: var(--bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.id-field input:focus {
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px var(--green-faint);
}

.id-field input.code-input {
    font-size: 26px;
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 14px 14px 14px 30px;
}

.id-foot {
    margin-top: 12px;
    font-size: 11px;
    color: var(--ink-light);
    line-height: 1.5;
}

.id-message {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 6px;
    border-left: 3px solid var(--ink-light);
    color: var(--ink-mid);
    background: var(--bg-alt);
}
.id-message.error {
    background: var(--yellow-faint);
    border-left-color: var(--yellow-main);
}
.id-message.success {
    background: var(--green-faint);
    border-left-color: var(--green-main);
}
.id-message a {
    color: var(--green-main);
    font-weight: 500;
    text-decoration: none;
}
.id-message a:hover { text-decoration: underline; }

.resend {
    margin-top: 16px;
    text-align: center;
}

/* Trust-this-browser checkbox row (mirrors login.css). */
.id-body .trust-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: start;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
}
.id-body .trust-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--green-main);
}
.id-body .trust-row .trust-label-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.id-body .trust-row .trust-help {
    grid-column: 2;
    display: block;
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.45;
    margin-top: 3px;
}

/* ============================================================
   How to answer questions (how-to-answer.php) — 2026-10-14 (Pete)

   Once, before the first question, for anybody without a finished report; and from question 1's
   "Show me how". The practice question is the question page's own scale (question.js, data-practice).
   ============================================================ */
.howto-title { font-family: var(--title); font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--ink); margin: 12px 0 6px; }
.howto-lede { font-size: 14px; line-height: 1.5; color: var(--ink-mid); margin: 0 0 16px; }
.howto-practice { border: 1px dashed #d8d8d8; border-radius: 12px; padding: 12px 12px 10px; margin-bottom: 16px; }
.howto-tag { font-family: var(--title); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.howto-practice .q-stem { font-size: 16px; margin-bottom: 12px; }
.howto-practice .q-v4-card { min-height: 64px; }
.howto-points { margin: 0 0 18px; padding-left: 1.1em; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.45; color: var(--ink-mid); }
.howto-points b { color: var(--ink); font-weight: 500; }