/* Beacon Bay Therapy client portal — intentionally follows the public website palette and typography. */
.portal-page {
    min-height: 72vh;
    padding: 128px 18px 70px;
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 38%);
}
.portal-shell {
    width: min(1080px, 100%);
    margin: 0 auto;
}
.portal-shell-narrow {
    width: min(560px, 100%);
    background: #fff;
    border: 1px solid rgba(35, 90, 122, .12);
    border-radius: 12px;
    box-shadow: 0 16px 45px rgba(29, 55, 69, .08);
    padding: 42px;
}
.portal-heading { text-align: center; margin-bottom: 30px; }
.portal-heading-left { text-align: left; margin-bottom: 0; }
.portal-eyebrow {
    margin: 0 0 7px;
    color: #88aba5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.portal-heading h1 {
    margin: 0 0 9px;
    color: #235a7a;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 700;
}
.portal-heading p:not(.portal-eyebrow) { margin: 0; color: #66767c; }
.portal-form { display: grid; gap: 19px; }
.portal-field label { display: block; margin-bottom: 7px; color: #334e59; font-weight: 600; }
.portal-field input {
    width: 100%;
    min-height: 50px;
    border: 1px solid #cbd8dc;
    border-radius: 6px;
    padding: 10px 13px;
    background: #fff;
    color: #25383f;
    font: inherit;
    outline: 0;
}
.portal-field input:focus { border-color: #88aba5; box-shadow: 0 0 0 3px rgba(136, 171, 165, .18); }
.portal-primary-button { width: 100%; min-height: 50px; border-radius: 6px; margin-top: 2px; }
.portal-help { margin: 20px 0 0; color: #7a878c; font-size: 13px; text-align: center; }
.portal-alert { margin: 0 0 22px; padding: 12px 14px; border-radius: 6px; background: #fff1ef; border: 1px solid #efc4bf; color: #8a3f36; font-size: 14px; }
.portal-dashboard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.portal-quiet-link { color: #235a7a; font-weight: 600; text-decoration: none; padding-top: 10px; }
.portal-quiet-link:hover { text-decoration: underline; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portal-card {
    display: flex;
    gap: 17px;
    min-height: 150px;
    padding: 25px;
    background: #fff;
    border: 1px solid rgba(35, 90, 122, .10);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(29, 55, 69, .055);
}
.portal-card-wide { grid-column: 1 / -1; }
.portal-card-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fce0ab;
    color: #235a7a;
    font-size: 18px;
}
.portal-card h2 { color: #235a7a; font-size: 19px; margin: 0 0 7px; font-weight: 700; }
.portal-card p { margin: 0 0 6px; color: #687b82; line-height: 1.6; }
.portal-card-main { color: #334e59 !important; font-weight: 600; }
.portal-text-link { color: #235a7a; font-weight: 600; }
.portal-coming-soon span:not(.portal-card-icon) { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #88aba5; }
@media (max-width: 767px) {
    /* Keep portal content comfortably clear of the tall mobile site header,
       and leave breathing room before the global footer. */
    .portal-page { padding: 136px 12px 84px; }
    .portal-shell-narrow { padding: 28px 20px; border-radius: 9px; }
    .portal-dashboard-top { display: block; }
    .portal-heading-left { margin-bottom: 10px; }
    .portal-grid { grid-template-columns: 1fr; }
    .portal-card-wide { grid-column: auto; }
    .portal-card { padding: 20px; min-height: auto; }
}

/* Portal-only header treatment.
   The public-site header.php is NOT changed.
   On public pages the transparent header sits over the hero image; the portal has no hero,
   so give only portal pages the same dark backdrop while preserving the theme's native
   nav hover/dropdown behaviour. */
html:not(.sticky-header-active) body.bbt-portal-page
#header.header-transparent:not(.header-semi-transparent) .header-body {
    background-color: var(--quaternary, #161326) !important;
}

/* When sticky mode becomes active, keep the same normal site header colour. */
body.bbt-portal-page #header .header-body {
    background-color: var(--quaternary, #161326) !important;
}

/* Do not force link/dropdown colours here.
   header-nav-light-text + header-nav-dropdowns-dark already provide the exact
   public-site white nav, hover states and readable dark dropdown styling. */

/* Login-page-only breathing room before the footer.
   Use padding on the main element so the spacing cannot collapse. */
body.bbt-portal-page .portal-login-page {
    padding-bottom: 140px;
}

body.bbt-portal-page .portal-login-page .portal-shell-narrow {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    body.bbt-portal-page .portal-login-page {
        padding-bottom: 80px;
    }
}


/* Step 4 — client questionnaire workflow */
.portal-notice {
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.portal-notice-success {
    color: #2f655c;
    background: #edf8f4;
    border: 1px solid #bedfd4;
}
.portal-notice-info {
    color: #235a7a;
    background: #eef7fc;
    border: 1px solid #c8dfec;
}
.portal-questionnaires-section {
    padding: 25px;
    background: #fff;
    border: 1px solid rgba(35, 90, 122, .10);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(29, 55, 69, .055);
}
.portal-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.portal-section-heading h2 {
    margin: 0;
    color: #235a7a;
    font-size: 23px;
    font-weight: 700;
}
.portal-count-pill,
.portal-q-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef7fc;
    color: #235a7a;
    font-size: 12px;
    font-weight: 700;
}
.portal-questionnaire-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.portal-questionnaire-card {
    display: flex;
    flex-direction: column;
    min-height: 270px;
    padding: 22px;
    border: 1px solid #dbe6ea;
    border-radius: 10px;
    background: #fbfdfe;
}
.portal-questionnaire-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.portal-q-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #dff0fb;
    color: #235a7a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
}
.portal-q-status {
    background: #edf8f4;
    color: #37776c;
}
.portal-questionnaire-card h3 {
    margin: 0 0 8px;
    color: #235a7a;
    font-size: 20px;
    line-height: 1.3;
}
.portal-questionnaire-card > p {
    margin: 0 0 14px;
    color: #687b82;
    line-height: 1.55;
}
.portal-questionnaire-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: auto 0 16px;
    color: #718188;
    font-size: 12px;
}
.portal-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 17px;
    border: 0;
    border-radius: 6px;
    background: #7dc0ed;
    color: #142238;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
.portal-action-button:hover {
    color: #142238;
    text-decoration: none;
    filter: brightness(.96);
    transform: translateY(-1px);
}
.portal-action-button:focus-visible {
    outline: 3px solid rgba(35, 90, 122, .25);
    outline-offset: 2px;
}
.portal-empty-state {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px dashed #cbd8dc;
    border-radius: 9px;
    background: #fbfdfe;
}
.portal-empty-state h3 { margin: 0 0 5px; color: #235a7a; font-size: 17px; }
.portal-empty-state p { margin: 0; color: #687b82; }

.portal-questionnaire-page { padding-bottom: 90px; }
.portal-questionnaire-shell { width: min(980px, 100%); }
.portal-questionnaire-top { margin-bottom: 24px; }
.portal-questionnaire-form { display: block; }
.portal-scale-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
    padding: 14px;
    border-radius: 9px;
    background: #eef7fc;
    color: #49656f;
    font-size: 12px;
    text-align: center;
}
.portal-scale-guide strong { color: #235a7a; }
.portal-question-list { display: grid; gap: 15px; }
.portal-question-card {
    min-width: 0;
    margin: 0;
    padding: 22px;
    border: 1px solid #dbe6ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(29, 55, 69, .04);
}
.portal-question-card legend {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    color: #294956;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}
.portal-question-number {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fce0ab;
    color: #235a7a;
    font-size: 13px;
}
.portal-question-help { margin: -6px 0 15px 42px; color: #718188; font-size: 13px; }
.portal-likert-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}
.portal-likert-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 86px;
    padding: 11px 8px;
    border: 1px solid #cfdee4;
    border-radius: 8px;
    background: #fbfdfe;
    color: #526970;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.portal-likert-option:hover {
    border-color: #8cbdd2;
    background: #f3faff;
}
.portal-likert-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.portal-likert-option:has(input:checked) {
    border-color: #6eb7e8;
    background: #e6f4fd;
    box-shadow: inset 0 0 0 1px #6eb7e8;
}
.portal-likert-option:has(input:focus-visible) {
    outline: 3px solid rgba(35, 90, 122, .22);
    outline-offset: 2px;
}
.portal-likert-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #fff;
    color: #235a7a;
    font-weight: 800;
}
.portal-likert-label { font-size: 12px; line-height: 1.35; }
.portal-submit-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 20px;
    padding: 20px 22px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dbe6ea;
}
.portal-submit-panel strong { color: #235a7a; }
.portal-submit-panel p { margin: 3px 0 0; color: #718188; font-size: 13px; }
.portal-submit-button { flex: 0 0 auto; min-width: 220px; }

@media (max-width: 767px) {
    .portal-questionnaire-grid { grid-template-columns: 1fr; }
    .portal-questionnaire-card { min-height: auto; }
    .portal-section-heading { align-items: center; }
    .portal-scale-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
    .portal-question-card { padding: 18px 14px; }
    .portal-likert-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-likert-option { min-height: 82px; }
    .portal-submit-panel { display: block; }
    .portal-submit-button { width: 100%; min-width: 0; margin-top: 15px; }
}

@media (max-width: 420px) {
    .portal-scale-guide { grid-template-columns: 1fr; }
    .portal-likert-options { grid-template-columns: 1fr; }
    .portal-likert-option {
        min-height: 58px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        text-align: left;
        padding: 10px 12px;
    }
    .portal-likert-value { margin: 0; flex: 0 0 28px; }
}

/* Step 5 — questionnaire history and progress graph */
.portal-progress-card .portal-text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
}
.portal-progress-page,
.portal-submission-page { padding-bottom: 95px; }
.portal-progress-panel {
    margin-bottom: 20px;
    padding: 26px;
    background: #fff;
    border: 1px solid rgba(35, 90, 122, .10);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(29, 55, 69, .055);
}
.portal-progress-heading { margin-bottom: 14px; }
.portal-section-copy {
    max-width: 760px;
    margin: 7px 0 0;
    color: #687b82;
    line-height: 1.55;
}
.portal-series-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 5px 0 18px;
}
.portal-series-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #d6e3e8;
    border-radius: 999px;
    background: #fbfdfe;
    color: #334e59;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.portal-series-toggle input { accent-color: #235a7a; }
.portal-series-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #235a7a;
}
.portal-series-dot-2 { background: #d7a84b; }
.portal-series-dot-3 { background: #88aba5; }
.portal-series-dot-4 { background: #7dc0ed; }
.portal-chart-wrap {
    position: relative;
    min-height: 390px;
    border: 1px solid #dbe6ea;
    border-radius: 10px;
    background: #fbfdfe;
    overflow: hidden;
}
.portal-progress-chart { width: 100%; min-height: 390px; padding: 8px; }
.portal-progress-chart svg { display: block; width: 100%; height: auto; min-height: 360px; }
.portal-chart-gridline { stroke: #dfe8ec; stroke-width: 1; }
.portal-chart-axis-label { fill: #718188; font-size: 13px; font-family: inherit; }
.portal-chart-line { vector-effect: non-scaling-stroke; }
.portal-chart-point { cursor: pointer; outline: none; }
.portal-chart-point:focus circle:last-child { stroke-width: 6; }
.portal-chart-no-series {
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #718188;
    text-align: center;
}
.portal-chart-tooltip {
    position: absolute;
    z-index: 4;
    width: 220px;
    padding: 12px 13px;
    border-radius: 8px;
    background: #161326;
    color: #fff;
    box-shadow: 0 10px 26px rgba(22, 19, 38, .22);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: auto;
}
.portal-chart-tooltip strong,
.portal-chart-tooltip span,
.portal-chart-tooltip a { display: block; }
.portal-chart-tooltip strong { margin-bottom: 3px; font-size: 14px; }
.portal-chart-tooltip span { color: rgba(255,255,255,.82); }
.portal-chart-tooltip a { margin-top: 7px; color: #8ed0f7; font-weight: 700; text-decoration: none; }
.portal-chart-help { margin: 10px 0 0; color: #718188; font-size: 12px; }
.portal-progress-empty { min-height: 150px; background: #fff; }
.portal-history-panel { margin-bottom: 0; }
.portal-history-groups { display: grid; gap: 16px; }
.portal-history-group {
    border: 1px solid #dbe6ea;
    border-radius: 10px;
    overflow: hidden;
    background: #fbfdfe;
}
.portal-history-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e4ecef;
}
.portal-history-group-head > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.portal-history-group-head h3 { margin: 0; color: #235a7a; font-size: 17px; }
.portal-history-list { display: grid; }
.portal-history-row {
    display: grid;
    grid-template-columns: 90px minmax(120px, 1fr) 95px 140px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 20px;
    border-bottom: 1px solid #e8eef1;
    color: #526970;
    text-decoration: none;
    transition: background .15s ease;
}
.portal-history-row:last-child { border-bottom: 0; }
.portal-history-row:hover { background: #f2f9fd; color: #526970; text-decoration: none; }
.portal-history-week { color: #235a7a; font-weight: 700; }
.portal-history-date { font-size: 13px; }
.portal-history-score { text-align: right; color: #687b82; }
.portal-history-score strong { color: #235a7a; font-size: 19px; }
.portal-history-open { text-align: right; color: #235a7a; font-size: 12px; font-weight: 700; }
.portal-submission-summary {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 20px;
    padding: 22px 25px;
    border-radius: 10px;
    background: #eef7fc;
    border: 1px solid #cfe2eb;
}
.portal-score-block {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 5px;
    color: #718188;
}
.portal-score-label { grid-column: 1 / -1; color: #687b82; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-score-block strong { color: #235a7a; font-size: 42px; line-height: 1; }
.portal-submission-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #49656f; font-size: 13px; }
.portal-answer-history { margin-bottom: 0; }
.portal-answer-list { display: grid; gap: 10px; }
.portal-answer-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px;
    border: 1px solid #dbe6ea;
    border-radius: 9px;
    background: #fbfdfe;
}
.portal-answer-copy h3 { margin: 0 0 7px; color: #334e59; font-size: 15px; line-height: 1.45; }
.portal-answer-copy p { margin: 0; color: #687b82; font-size: 13px; }
.portal-answer-copy p strong { color: #235a7a; font-size: 16px; }

@media (max-width: 767px) {
    .portal-progress-panel { padding: 19px 14px; }
    .portal-chart-wrap,
    .portal-progress-chart,
    .portal-chart-no-series { min-height: 315px; }
    .portal-progress-chart { overflow-x: auto; }
    .portal-progress-chart svg { min-width: 620px; min-height: 300px; }
    .portal-history-group-head { align-items: flex-start; padding: 15px; }
    .portal-history-group-head > div { align-items: flex-start; flex-direction: column; gap: 7px; }
    .portal-history-row {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding: 13px 15px;
    }
    .portal-history-week { grid-column: 1; }
    .portal-history-date { grid-column: 1; }
    .portal-history-score { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .portal-history-open { grid-column: 1 / -1; text-align: left; margin-top: 5px; }
    .portal-submission-summary { display: block; padding: 18px; }
    .portal-submission-meta { margin-top: 15px; display: grid; gap: 7px; }
}

/* Step 10 — Authenticity submission scoring details */
.portal-auth-score-panel {
    margin: 20px 0;
    padding: 26px;
    border: 1px solid #d7e4ec;
    border-radius: 14px;
    background: #fff;
}

.portal-auth-subscale-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.portal-auth-subscale-card {
    padding: 18px;
    border: 1px solid #d7e4ec;
    border-radius: 12px;
    background: #f8fbfd;
}

.portal-auth-subscale-card span {
    display: block;
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: #557083;
}

.portal-auth-subscale-card strong {
    font-size: 1.7rem;
    color: #15577b;
}

.portal-auth-subscale-card strong small {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c8190;
}

.portal-auth-scoring-note {
    margin: 16px 0 0;
    font-size: 0.86rem;
    color: #61798a;
}

.portal-auth-answer-values {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.portal-auth-answer-values > span {
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid #dce8ef;
    border-radius: 10px;
    background: #f8fbfd;
}

.portal-auth-answer-values small,
.portal-auth-answer-values em {
    display: block;
    font-size: 0.78rem;
    color: #6b8190;
    font-style: normal;
}

.portal-auth-answer-values strong {
    display: block;
    margin: 2px 0;
    font-size: 1.15rem;
    color: #15577b;
}

.portal-auth-answer-values .is-reversed {
    background: #fff8e8;
    border-color: #f0d59a;
}

@media (max-width: 760px) {
    .portal-auth-subscale-grid {
        grid-template-columns: 1fr;
    }

    .portal-auth-answer-values {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* Step 10 — Authenticity progress/history */
.portal-auth-progress-note {
    margin: 10px 0 0;
    font-size: 0.86rem;
    color: #61798a;
}

.portal-auth-history-subscales {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.portal-auth-history-subscales > span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #d9e6ee;
    border-radius: 999px;
    background: #f7fbfd;
    color: #4f6b7d;
    font-size: 0.75rem;
    font-weight: 600;
}

.portal-chart-tooltip-subscales {
    display: grid;
    gap: 3px;
    margin: 7px 0 3px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.portal-chart-tooltip-subscales span {
    display: block;
    font-size: 0.76rem;
    line-height: 1.35;
}

.portal-chart-tooltip-subscales b {
    font-weight: 700;
}

@media (max-width: 760px) {
    .portal-auth-history-subscales {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* Step 10.1 — Week axis + compact history actions */
.portal-history-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
}

.portal-history-actions .portal-history-score,
.portal-history-actions .portal-history-open {
    white-space: nowrap;
}

.portal-history-actions .portal-auth-history-subscales {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 5px;
    width: auto;
}

.portal-history-actions .portal-auth-history-subscales > span {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .portal-history-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }

    .portal-history-actions .portal-auth-history-subscales {
        flex-wrap: wrap;
    }
}


/* Step 10.2 — final history row alignment */
@media (min-width: 901px) {
    .portal-history-row {
        grid-template-columns: 90px minmax(120px, 1fr) minmax(0, auto);
    }

    .portal-history-actions {
        grid-column: 3;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }

    .portal-history-actions .portal-auth-history-subscales {
        gap: 4px;
        min-width: 0;
    }

    .portal-history-actions .portal-auth-history-subscales > span {
        min-height: 26px;
        padding: 3px 7px;
        font-size: 0.7rem;
    }

    .portal-history-actions .portal-history-open {
        flex: 0 0 auto;
        margin-left: 2px;
    }
}

@media (max-width: 900px) {
    .portal-history-row {
        grid-template-columns: 1fr auto;
    }

    .portal-history-actions {
        grid-column: 1 / -1;
        grid-row: auto;
        display: flex;
        width: 100%;
        margin-top: 7px;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
    }

    .portal-history-actions .portal-history-score {
        margin-right: auto;
    }

    .portal-history-actions .portal-history-open {
        margin-left: auto;
    }
}

@media (max-width: 620px) {
    .portal-history-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .portal-history-actions .portal-history-score,
    .portal-history-actions .portal-history-open {
        margin-left: 0;
        margin-right: 0;
    }
}


/* Step 12 — Secure progress graph sharing */
.portal-progress-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.portal-share-progress-button {
    text-decoration: none;
}
.portal-share-form {
    display: grid;
    gap: 18px;
}
.portal-share-checks {
    display: grid;
    gap: 9px;
}
.portal-share-checks label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #d9e5ed;
    border-radius: 10px;
    background: #fbfdfe;
}
.portal-share-checks input {
    width: 17px;
    height: 17px;
}
.portal-share-expiry {
    display: grid;
    gap: 7px;
    max-width: 260px;
    color: #526b7c;
    font-size: .9rem;
}
.portal-share-expiry select {
    height: 44px;
    border: 1px solid #cbdbe5;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
}
.portal-share-privacy-note,
.portal-share-public-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid #cfe2ee;
    border-radius: 10px;
    background: #f1f9fd;
    color: #4d6879;
    font-size: .88rem;
    line-height: 1.5;
}
.portal-share-copy-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    margin-top: 15px;
}
.portal-share-copy-row input {
    min-width: 0;
    height: 46px;
    border: 1px solid #cbdbe5;
    border-radius: 8px;
    padding: 0 11px;
    background: #f8fbfd;
    color: #25475d;
}
.portal-share-small {
    margin: 9px 0 0;
    color: #687f8f;
    font-size: .82rem;
}
.portal-share-list {
    display: grid;
    gap: 9px;
}
.portal-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px;
    border: 1px solid #dce6ed;
    border-radius: 11px;
    background: #fcfdfe;
}
.portal-share-row > div:first-child {
    display: grid;
    gap: 3px;
}
.portal-share-row > div:first-child span {
    color: #6b8090;
    font-size: .78rem;
}
.portal-share-row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #60798a;
    font-size: .82rem;
}
.portal-share-revoke {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #e5c8cb;
    border-radius: 8px;
    background: #fff;
    color: #a94049;
    cursor: pointer;
}
.portal-share-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 9px;
}
.portal-share-alert-error {
    border: 1px solid #efc9cd;
    background: #fff2f3;
    color: #973943;
}
.portal-shared-invalid {
    display: flex;
    gap: 16px;
    align-items: center;
}
.bbt-shared-progress-page .portal-chart-tooltip a {
    display: none !important;
}
@media (max-width: 700px) {
    .portal-progress-top-actions {
        justify-content: flex-start;
    }
    .portal-share-copy-row {
        grid-template-columns: 1fr;
    }
    .portal-share-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .portal-share-row-meta {
        width: 100%;
        justify-content: space-between;
    }
}


/* Clinical background zones used on the PHQ-9 outcome graph */
.portal-chart-zone-label {
    fill: #173c58;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}
.portal-chart-threshold-line {
    stroke: #17212b;
    stroke-width: 2.5;
    stroke-dasharray: 9 7;
    opacity: .88;
    pointer-events: none;
}
.portal-chart-threshold-label {
    fill: #273846;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}


/* FINAL PHQ-9 outcome graph colour bands */
.portal-progress-chart svg .portal-chart-clinical-zone {
    display: block !important;
    visibility: visible !important;
    opacity: .78 !important;
    pointer-events: none !important;
}
.portal-progress-chart svg.has-phq9-zones {
    background: transparent !important;
}
.portal-progress-chart .portal-chart-zone-label {
    display: block !important;
    visibility: visible !important;
    fill: #173c58 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.portal-progress-chart .portal-chart-threshold-line {
    display: block !important;
    visibility: visible !important;
    stroke: #17212b !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 9 7 !important;
}
.portal-progress-chart .portal-chart-threshold-label {
    display: block !important;
    visibility: visible !important;
    fill: #273846 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}


/* Adaptive outcome zones when exactly one questionnaire is selected */
.portal-progress-chart svg.has-outcome-zones .portal-chart-clinical-zone {
    display: block !important;
    visibility: visible !important;
    opacity: .78 !important;
    pointer-events: none !important;
}
.portal-progress-chart svg.has-outcome-zones .portal-chart-zone-label {
    display: block !important;
    visibility: visible !important;
    fill: #173c58 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    paint-order: stroke;
    stroke: rgba(255,255,255,.55);
    stroke-width: 2px;
    stroke-linejoin: round;
}
.portal-progress-chart svg.has-outcome-zones .portal-chart-threshold-line,
.portal-progress-chart svg.has-outcome-zones .portal-chart-threshold-label {
    display: block !important;
    visibility: visible !important;
}


/* Final mobile progress-graph responsiveness */
@media (max-width: 700px) {
    .portal-chart-wrap {
        width: 100%;
        min-width: 0;
        overflow: visible !important;
    }

    .portal-progress-chart {
        width: 100%;
        min-width: 0;
        min-height: 0 !important;
        padding: 4px 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .portal-progress-chart svg {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .portal-chart-axis-label {
        font-size: 12px;
    }

    .portal-chart-zone-label {
        font-size: 11px !important;
    }

    .portal-chart-threshold-label {
        font-size: 10px !important;
    }

    .portal-chart-tooltip {
        max-width: min(260px, calc(100vw - 32px));
    }
}

/* Progress graph/table view switch */
.portal-progress-view-switch {
    display: inline-flex;
    gap: 8px;
    padding: 5px;
    margin: 20px 0 18px;
    border: 1px solid #d6e2e8;
    border-radius: 14px;
    background: #f6fafc;
}
.portal-progress-view-button {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    background: transparent;
    color: #245d79;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.portal-progress-view-button i { margin-right: 7px; }
.portal-progress-view-button.is-active {
    background: #245d79;
    color: #fff;
    box-shadow: 0 4px 12px rgba(36, 93, 121, .16);
}
.portal-progress-view-panel[hidden] { display: none !important; }
.portal-score-tables { display: grid; gap: 24px; }
.portal-score-table-card {
    border: 1px solid #d6e2e8;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.portal-score-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2eaee;
}
.portal-score-table-heading > div { display: flex; align-items: center; gap: 12px; }
.portal-score-table-heading h3 { margin: 0; font-size: 1.05rem; }
.portal-table-swipe-hint { display: none; margin: 12px 16px 0; color: #6c7b88; font-size: .85rem; }
.portal-score-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.portal-score-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: .94rem;
}
.portal-score-table th,
.portal-score-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #e6ecef;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.portal-score-table thead th { background: #245d79; color: #fff; font-weight: 700; }
.portal-score-table th:first-child { text-align: left; min-width: 310px; white-space: normal; }
.portal-score-table tbody tr:nth-child(even) { background: #f7f9fa; }
.portal-score-table tbody th { font-weight: 600; color: #344f5d; }
.portal-score-table tfoot th,
.portal-score-table tfoot td { background: #eef6f7; font-weight: 700; }
.portal-score-table .portal-score-total-row th,
.portal-score-table .portal-score-total-row td { background: #dfeff0; color: #204f66; }

@media (max-width: 700px) {
    .portal-progress-view-switch { display: flex; width: 100%; }
    .portal-progress-view-button { flex: 1; padding: 10px 8px; }

    .portal-score-tables { gap: 18px; }
    .portal-score-table-card { border-radius: 14px; }
    .portal-score-table-heading {
        align-items: center;
        padding: 13px 14px;
        gap: 10px;
    }
    .portal-score-table-heading > div {
        align-items: center;
        gap: 9px;
        min-width: 0;
    }
    .portal-score-table-heading h3 {
        font-size: .92rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .portal-score-table-heading .portal-q-badge {
        flex: 0 0 auto;
        max-width: 92px;
        text-align: center;
    }
    .portal-score-table-heading .portal-count-pill {
        flex: 0 0 auto;
        padding: 7px 9px;
        font-size: .78rem;
        white-space: normal;
        text-align: center;
    }

    .portal-table-swipe-hint {
        display: block;
        margin: 9px 14px;
        font-size: .78rem;
        line-height: 1.3;
    }
    .portal-score-table-scroll {
        position: relative;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    .portal-score-table {
        width: max-content;
        min-width: 100%;
        table-layout: fixed;
        font-size: .82rem;
    }
    .portal-score-table th,
    .portal-score-table td {
        padding: 10px 8px;
        line-height: 1.35;
    }
    .portal-score-table thead th {
        min-width: 76px;
    }
    .portal-score-table th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 185px;
        min-width: 185px;
        max-width: 185px;
        padding-left: 14px;
        padding-right: 12px;
        white-space: normal;
        overflow-wrap: break-word;
        box-shadow: 5px 0 8px -8px rgba(24, 58, 75, .55);
    }
    .portal-score-table thead th:first-child {
        z-index: 4;
        background: #245d79;
    }
    .portal-score-table tbody th:first-child { background: #fff; }
    .portal-score-table tbody tr:nth-child(even) th:first-child { background: #f7f9fa; }
    .portal-score-table tfoot th:first-child { background: #eef6f7; }
    .portal-score-table .portal-score-total-row th:first-child { background: #dfeff0; }
    .portal-score-table td { min-width: 76px; }

    /* A single completion should fit the phone instead of creating empty scroll space. */
    .portal-score-table-card--single .portal-table-swipe-hint { display: none; }
    .portal-score-table-card--single .portal-score-table {
        width: 100%;
        min-width: 0;
    }
    .portal-score-table-card--single .portal-score-table th:first-child {
        width: auto;
        min-width: 0;
        max-width: none;
    }
    .portal-score-table-card--single .portal-score-table th:not(:first-child),
    .portal-score-table-card--single .portal-score-table td {
        width: 92px;
        min-width: 92px;
    }
}

@media (max-width: 390px) {
    .portal-score-table th:first-child {
        width: 165px;
        min-width: 165px;
        max-width: 165px;
    }
    .portal-score-table thead th,
    .portal-score-table td { min-width: 70px; }
}

/* Questionnaire 5-day completion cooldown */
.portal-questionnaire-card.is-cooldown-locked {
    border-color: rgba(35, 90, 122, .16);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
}
.portal-questionnaire-lock-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #d6e1e4;
    border-radius: 7px;
    background: #f6f9fa;
    color: #536970;
    font-size: 12px;
}
.portal-questionnaire-lock-note > i { color: #235a7a; }
.portal-questionnaire-lock-note span { display: grid; gap: 2px; }
.portal-questionnaire-lock-note strong { color: #334e59; }
.portal-questionnaire-lock-note small { color: #718188; font-size: 11px; }
.portal-action-button-disabled,
.portal-action-button-disabled:hover {
    background: #e5ebed;
    color: #728187;
    cursor: not-allowed;
    transform: none;
    filter: none;
}


/* Mobile responsive fix for Progress History */
@media (max-width: 600px) {
    .portal-progress-panel {
        padding: 14px 10px;
        border-radius: 8px;
    }

    .portal-history-group-head {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .portal-history-group-head .portal-history-actions {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .portal-history-score,
    .portal-history-open,
    .portal-history-badge {
        white-space: nowrap;
    }

    .portal-answer-copy,
    .portal-auth-history-subscales {
        width: 100%;
    }

    .portal-auth-history-subscales > span {
        white-space: normal;
    }

    .portal-history-row {
        padding: 12px 10px;
    }
}