/* Power Style inside the Leadership Journey Portal.
 *
 * ONLY the differences the integration creates. The instrument's own look —
 * dials, bars, the survey tunnel, the report cards — is main.css, survey.css and
 * report.css, ported unchanged from psurvey (FS-024 §3). Nothing here restyles
 * those: Pete's rule is that Alignment 360 is the styling source of truth AND
 * that the dial charts are kept, and the way to honour both is to leave the
 * instrument alone and only fix where the two shells meet.
 */

/* The report inside the portal shell. psurvey's .report-body centred itself in
 * a full-screen tunnel; here it sits inside .main-content, which already has the
 * portal's own page padding. */
.ps-report-page {
    max-width: 1200px;   /* the portal's own --container-max-width (Pete: match Alignment) */
    margin: 1.5rem auto 3rem;
    padding: 0 1rem;
}

.ps-report-page .overall-block,
.ps-report-page .attr-card {
    background: #fff;
}

/* FS-037 — the size and colour are .text-micro's (components.css), which the
 * markup carries; this keeps only what is particular to the context line.
 * It was 0.8rem / #8a8a8a — two more values in a module that had about
 * thirty-five of them. */
.report-context {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.report-context strong {
    color: #3d3d3d;
    font-weight: 600;
}

/* The attribute detail page, inside the portal. Its own header carries the back
 * arrow and the title, so the portal's navigation sits above a second, smaller
 * one — which is correct: one gets you out of the module, the other gets you
 * back to the report. */
.ps-attr-page {
    max-width: 1200px;   /* the portal's own --container-max-width (Pete: match Alignment) */
    margin: 1.5rem auto 3rem;
    padding: 0 1rem;
}

/* ---------------------------------------------------------------------------
 * THE ACCOUNT FORM that closes the walk.
 *
 * ⚠ The .claim-banner rules that used to be here are gone with the page that
 * carried them. The report used to be shown first with "keep this result"
 * offered on it; the order is now account THEN report (Pete, 2026-09-09), so
 * there is no unclaimed report for a banner to sit on.
 * ------------------------------------------------------------------------- */
.claim-body { flex: 1; padding: 18px 0 24px; }

.claim-title {
    font-family: var(--title);
    font-weight: 700;
    font-size: 25px;
    line-height: 1.25;
    text-transform: none;
    color: var(--ink);
    margin: 8px 0 10px;
}
.claim-note {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 22px;
}
.claim-note strong { color: var(--ink); font-weight: 600; }

.claim-form label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-mid);
    margin-bottom: 12px;
}
.claim-form label .context-input { margin-top: 4px; font-weight: 400; }

/* Two to a row where there is room, stacked where there is not. */
.claim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px) { .claim-row { grid-template-columns: 1fr; } }

.claim-signin {
    margin-top: 20px;
    font-size: 13px;
    color: var(--ink-soft);
    text-align: center;
}
.claim-signin a { color: var(--green-main); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * THE SURVEY TUNNEL — the tweaks Pete asked for on 2026-09-09.
 *
 * These are overrides on top of the ported main.css / survey.css rather than
 * edits to them, and deliberately so: those two files are the instrument as it
 * came across, and keeping the deltas in one place is what lets somebody see
 * what the integration changed about how it looks.
 * ------------------------------------------------------------------------- */

/* 1 — A TITLE. The Alignment survey names itself at the top of every page; this
 * one named itself only in the browser tab, so a participant arriving from a
 * link had nothing on the page telling them what they were taking. */
.ps-survey-title {
    font-family: var(--title), 'Cabin Condensed', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #53565A;              /* the same grey the Alignment survey uses */
    margin: 0;
    padding: 14px 0 4px;
    text-align: center;
}

/* ⚠ .brand-header is `display: flex` with a single centred child. Dropping the
 * title into it made the two into a ROW — "◆◆◆POWER STYLE ASSESSMENT" running
 * together on one line. It becomes a column so the mark stays above the name. */
.brand-header {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 4px;
}
.brand-header .ps-survey-title { padding-top: 8px; }

/* On the question and pause pages the title sits above the progress header,
 * where it wants less room around it than on a full-page brand header. */
.page-question > .app-shell > .ps-survey-title,
.page-midjourney > .app-shell > .ps-survey-title,
.app-shell > .ps-survey-title { padding: 16px 0 8px; }

/* 2 — THE PROGRESS BAR, matched to the Alignment survey's: 12px and a pill,
 * against a pale-green track, instead of a 3px hairline in a neutral grey. It
 * was so thin it read as a border on the header rather than as progress. */
.t2-progress {
    height: 10px;
    background: #ADDC91;
    border-radius: 9999px;
    overflow: hidden;
    margin: 0 var(--shell-pad-x) 2px;
}
.t2-progress-fill { border-radius: 9999px; background: #4C8D2B; }

/* 3 — TYPE, up a few points throughout. The instrument was drawn for a phone
 * and every size came across as-is; on a laptop the question text in particular
 * was smaller than the portal's body copy. */
.q-stem          { font-size: 21px; }
.q-v4-card       { font-size: 15px; line-height: 1.4; }
.context-prompt  { font-size: 25px; }
.context-note    { font-size: 15px; }
.context-input   { font-size: 16px; height: 48px; }
.context-hint    { font-size: 12.5px; }
.context-examples .chip { font-size: 12.5px; }
.section-label   { font-size: 12px; }
.t2-counter      { font-size: 12px; }
.t2-back         { font-size: 14px; }
.hero            { font-size: 31px; }
.hero-sub        { font-size: 17px; }
.btn-primary     { font-size: 15px; }
/* THE PORTAL'S BUTTON HEIGHT (Pete, 2026-10-09: the survey's Continue and Submit were "too tall - should be
 * standard css"). 11px of padding on 15px type made them 45px; the portal's .custom-button is 30px
 * (manage/css/button-styles.css, FS-037). Same type size, line height, padding and minimum height here; the
 * survey keeps its own green and its capitals. The landing pages' .lg buttons too (Pete: "make the begin and
 * the two on the shared a report with you standard"). */
.btn-primary, .btn-primary.lg, .btn-secondary, .btn-secondary.lg {
    font-size: 15px; line-height: 1.2; min-height: 30px; padding: 0.125rem 1.25rem; justify-content: center; gap: 0.4rem;
}

/* 4 — THE PAUSE PAGES, brought into line. They were rendering an unstyled <h1>
 * at the browser's 2em default because the page asked for class names that had
 * no rules; the classes below DO have rules, and these nudge them the same few
 * points as everything else. */
.pause-text { font-size: 23px; }
.pause-note { font-size: 15px; line-height: 1.65; }

@media (max-width: 480px) {
    /* Back to roughly the sizes the instrument was drawn at. */
    .q-stem         { font-size: 19px; }
    .q-v4-card      { font-size: 14px; }
    .context-prompt { font-size: 22px; }
    .hero           { font-size: 26px; }
    .ps-survey-title { font-size: 1.15rem; }
}


/* 5 — THE TUNNEL, 25% WIDER ON A DESKTOP (Pete, 2026-09-10). 480px is right on a
 * phone and it stays the phone size; above a tablet's width the column grows to
 * 600px, which gives the two pole cards room to sit side by side without
 * wrapping a six-word pole onto three lines. */
@media (min-width: 720px) {
    .app-shell { max-width: 600px; }
}

/* 7 — FS-030: a group's context, locked, on the invited person's first page. */
.context-locked {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid #cfd3cd; background: #eceeea; border-radius: 8px;
    padding: 12px 14px; font-size: 17px; font-weight: 500; color: var(--ink); margin: 4px 0 14px;
}
.context-locked svg { width: 18px; height: 18px; flex: 0 0 auto; color: #53565a; }
.context-consent {
    background: #eaf3e4; color: #2f4d1f; border-radius: 8px;
    padding: 10px 14px; font-size: 14px; line-height: 1.5; margin: 0 0 16px;
}

/* 6 — THE QUESTION HOLDS STILL (Pete, 2026-09-14). The stem and the two poles
 * each took the height of their own words, so from one question to the next the
 * poles and the dots jumped up and down. Each now has a MINIMUM height, measured
 * in lines of its own text (so a browser's larger text grows it with the words),
 * and grows only past that.
 *
 * The minimums are the most lines the real content takes at the default text
 * size, measured on every question in all five languages (2026-09-14):
 *   phone      stem 2–3 lines → 3;  poles 2–6 → 4 (39 of 40 in English)
 *   ≥ 720px    stem 1–2 lines → 2;  poles 1–4 → 3 (every card but one German)
 * A pole card's height counts its padding and borders: 12 + 12 + 1 + 1 = 26px.
 * Both cards take the taller one's height, so they always match. */
.q-stem     { min-height: calc(3 * 1.25em); }
.q-v4-card  { min-height: calc(4 * 1.4em + 26px); align-self: stretch; }
@media (min-width: 720px) {
    .q-stem     { min-height: calc(2 * 1.25em); }
    .q-v4-card  { min-height: calc(3 * 1.4em + 26px); }
}

/* The code step. The field is sized for six digits and set large, because it is
 * typed while reading the code off another screen. */
.claim-code {
    max-width: 12rem;
    font-size: 22px !important;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.claim-notice {
    background: #e7f1d8;
    color: #3c7422;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 14px;
}
.claim-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--ink-light);
    font-size: 13px;
}
.claim-secondary form { margin: 0; }
.claim-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--green-main);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.claim-linkbtn:hover { text-decoration: underline; }

/* Local stack only — the claim code, because mail is not sent there. The same
   amber as the login page's "password checking is disabled" notice. */
.claim-dev {
    background: #fdf3d5;
    border: 1px solid #f4e2b0;
    color: #6b5a2a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 14px;
}
.claim-dev strong { letter-spacing: 0.15em; font-size: 16px; color: #3d3015; }

/* ===== REL-021 — FS-046: the agreement on the walk's account forms and the
 * consent step; the footer's policy links; the share dialog's list. ========== */
.consent-block { display: flex; flex-direction: column; gap: .7rem; margin: 1.1rem 0 .4rem; padding: 1rem 1.1rem;
  border: 1px solid #e3e6df; border-radius: 10px; background: #fbfbf8; font-size: 14.5px; line-height: 1.5; color: #3b3f43; text-align: left; }
.consent-block p { margin: 0; }
.consent-block a { color: #3f6f18; text-decoration: underline; }
/* The tick lines read as the paragraph above them (Pete, 2026-10-09): .claim-form label made them 12.5px and
 * bold. Same size, weight and colour as the block; the box is one em, centred on the first line. */
.consent-block .consent-check { display: flex; margin: 0; font-size: inherit; line-height: inherit; color: inherit;
  font-weight: 400; letter-spacing: normal; text-transform: none; }
.consent-check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-weight: 400; margin: 0; }
.consent-check input { flex: 0 0 auto; font-size: inherit; width: 1em; height: 1em; margin: .25em 0 0; accent-color: #4f8a1f; }
.consent-foot { font-size: 13px; color: #6c757d; }
button[data-consent-submit]:disabled { opacity: .45; cursor: not-allowed; }
.foot-links { margin-left: .6rem; white-space: nowrap; }
.foot-links a { color: inherit; text-decoration: underline; }
.consent-step .consent-not { margin: .35rem 0 0; padding-left: 1.2rem; }
.consent-step p { margin: 0 0 .75rem; }
.consent-step .inv-check { margin: .5rem 0 0; }

/* REL-024 item 8 — LEAVING A SURVEY AND COMING BACK (power/lib/resume.php). Self-contained: the same pop-up sits on
 * the home (a portal page) and over a survey page (the tunnel), which share none of their other sheets. Its two
 * buttons are the portal's own (manage/css/button-styles.css, loaded onto a survey page with the pop-up). */
.app-shell { position: relative; }
.ps-save-exit { position: absolute; top: 18px; right: var(--shell-pad-x, 18px); font-size: .875rem; color: #53565A;
                text-decoration: underline; text-underline-offset: 3px; }
.ps-save-exit:hover { color: #2f4d1f; }
@media (max-width: 520px) { .ps-save-exit { position: static; align-self: flex-end; margin: 10px 0 -6px; } }
.ps-resume-scrim { position: fixed; inset: 0; background: rgba(30, 33, 36, .55); z-index: 2000; }
.ps-resume { position: fixed; z-index: 2001; left: 50%; top: 50%; transform: translate(-50%, -50%);
             width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
             background: #fff; color: #33363a; border-radius: 12px; padding: 1.5rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
             font-family: Roboto, system-ui, sans-serif; text-align: left; }
.ps-resume h2 { font-family: var(--title), 'Cabin Condensed', system-ui, sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: none; letter-spacing: normal;
                color: #33363a; margin: 0 0 .6rem; }
.ps-resume p { margin: 0 0 1.1rem; line-height: 1.5; font-size: 1rem; }
.ps-resume-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .6rem; }
.ps-resume-acts .ps-resume-discard { margin-right: auto; }   /* the way to deleting stands apart from the other two */
.ps-resume-error { color: #b3261e; margin: .9rem 0 0 !important; }
.ps-resume-on, .ps-resume-on body { overflow: hidden; }
.ps-resume-banner-acts { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* The mark on every page of the survey (Tracey, 2026-10-15): the pages that had no header of their own get one
 * (psTunnelHead()), with less room above it than a landing page's, so a question does not move far down. */
.page-question > .app-shell > .brand-header,
.page-midjourney > .app-shell > .brand-header,
.page-reflection > .app-shell > .brand-header { padding-top: 16px; }