/* ===================== V2 Process Questionnaire ===================== */

/* ========== LAYOUT ========== */

/* Wrapper inserted as direct child of .v2-todo-panel */
#v2PqSliderWrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.v2-pq-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--v2-pq-bg-color, #F0F2FD);
    position: relative;
    overflow: hidden;
}

#v2PqReportForm {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.v2-pq-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* ========== HEADER ========== */
/* z-index sits above the sticky section bar (z-index 5) so the coverage
 * dropdown — which lives in the header's stacking context — can render
 * over the section bar instead of being clipped beneath it. */
.v2-pq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 36px;
    background: #fff;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    border-bottom: 1px solid #E5E5EA;
}

/* Left column — org logo (matches right column width to keep center perfectly centered) */
.v2-pq-header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-height: 40px;
    max-width: 120px;
}

.v2-pq-header-logo-img {
    max-height: 40px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: darken;
}

/* Middle column — evaluation title + date/coverage, centered */
.v2-pq-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-align: center;
}

.v2-pq-title {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #3D3D3D;
    letter-spacing: 0.17px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.v2-pq-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.v2-pq-subtitle-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #5C5C5C;
    line-height: 1.5;
}

.v2-pq-subtitle-sep {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: #ADADAD;
    line-height: 18px;
    margin: 0 2px;
}

/* ===== Coverage swap pill (header subtitle) =====
 * Replaces the static coverage label when the user has > 1 coverage in
 * the create flow. Clicking the pill toggles a search-able dropdown
 * anchored under the subtitle row. */
.v2-pq-coverage-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.v2-pq-coverage-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    color: #5C5C5C;
    transition: background 0.15s;
}

.v2-pq-coverage-pill:hover,
.v2-pq-coverage-pill--open {
    background: rgba(0, 0, 0, 0.06);
}

.v2-pq-coverage-pill .v2-pq-coverage-name {
    color: #5C5C5C;
}

.v2-pq-coverage-chevron {
    transition: transform 0.15s ease;
    color: #7A7A7A;
    flex-shrink: 0;
}

.v2-pq-coverage-pill--open .v2-pq-coverage-chevron {
    transform: rotate(180deg);
}

.v2-pq-coverage-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    z-index: 30;
    padding: 8px;
    box-sizing: border-box;
}

.v2-pq-coverage-search-wrap {
    position: relative;
    margin-bottom: 6px;
}

.v2-pq-coverage-search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

.v2-pq-coverage-search {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 32px;
    border: 1px solid #D6D6D6;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #3D3D3D;
    outline: none;
    box-sizing: border-box;
    background: #FFFFFF;
}

.v2-pq-coverage-search:focus {
    border-color: #2541DD;
}

.v2-pq-coverage-list {
    max-height: 240px;
    overflow-y: auto;
    display: grid;
    gap: 2px;
}

.v2-pq-coverage-item {
    padding: 8px 10px;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #3D3D3D;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s;
    text-align: start;
}

.v2-pq-coverage-item:hover {
    background: #F0F2FD;
}

.v2-pq-coverage-item.v2-pq-coverage-active {
    color: #2541DD;
    background: #F0F2FD;
}

/* Right column — Close + Submit buttons (252px total to mirror logo column) */
.v2-pq-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    width: 252px;
}

/* Close button in header */
.v2-pq-header-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 42px;
    background: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #5C5C5C;
    line-height: 20px;
}
.v2-pq-header-close-btn:hover {
    background: #F5F5F5;
}

/* Submit button in header — always enabled for validation preview */
.v2-pq-header-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 42px;
    background: #4F66E4;
    border: 1px solid #4F66E4;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
}
.v2-pq-header-submit-btn:hover {
    background: #3D52C7;
    border-color: #3D52C7;
}

/* ========== SECTION BAR ========== */
/* Every section bar is sticky so the next one slides into place over the
 * previous one as you scroll — no gap, no flicker between sections. */
.v2-pq-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 24px;
    background: #5C5C5C;
    /* border-bottom: 1px solid #D6D6D6; */
    position: sticky;
    top: 0;
    z-index: 5;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.v2-pq-section-bar.v2-pq-bar-elevated {
    z-index: 20;
}

.v2-pq-section-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.v2-pq-section-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #ebebeb;
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.v2-pq-section-counter {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #3D3D3D;
    line-height: normal;
    white-space: nowrap;
}

.v2-pq-section-arrow {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.v2-pq-section-pill.v2-pq-dd-expanded .v2-pq-section-arrow {
    transform: rotate(0deg);
}

.v2-pq-section-name {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Section dropdown */
.v2-pq-section-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 6px);
    left: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 15;
    min-width: 200px;
    padding: 4px 0;
    max-height: 600px;
    overflow-y: auto;
}

.v2-pq-section-dropdown.v2-pq-open {
    display: block;
}

.v2-pq-section-dropdown-item {
    padding: 10px 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #3D3D3D;
    cursor: pointer;
    transition: background 0.15s;
}

.v2-pq-section-dropdown-item:hover {
    background: #F6F7FE;
}

.v2-pq-section-dropdown-item.v2-pq-active {
    color: #2541DD;
    background: #F0F2FD;
}

.v2-pq-section-dropdown-subitem {
    padding: 8px 16px 8px 32px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #6B6B6B;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.v2-pq-section-dropdown-subitem:hover {
    background: #F6F7FE;
    color: #3D3D3D;
}

.v2-pq-section-dropdown-subitem.v2-pq-active {
    color: #2541DD;
    background: #F0F2FD;
}

/* ========== SUB-SECTION BAR ========== */
.v2-pq-subsection-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: #EBEBEB;
    position: sticky;
    top: 49px;
    z-index: 4;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.v2-pq-subsection-num {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #3D3D3D;
    line-height: normal;
    width: 22px;
    flex-shrink: 0;
}

.v2-pq-subsection-name {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #3D3D3D;
    line-height: normal;
    flex: 1;
    min-width: 0;
}

/* ========== COLLAPSE / EXPAND TOGGLE ========== */
/* Whole bar is clickable as a toggle; dropdown pill / chevron handle their
   own clicks via JS guards. */
.v2-pq-section-bar,
.v2-pq-subsection-bar {
    cursor: pointer;
}
.v2-pq-collapse-toggle {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}
.v2-pq-collapse-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
}
.v2-pq-section-collapse-toggle {
    color: #FFFFFF;
}
.v2-pq-section-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}
.v2-pq-subsection-collapse-toggle {
    color: #3D3D3D;
}
.v2-pq-collapse-toggle svg {
    transition: transform 0.2s ease;
}
.v2-pq-section-bar.v2-pq-collapsed .v2-pq-collapse-toggle svg,
.v2-pq-subsection-bar.v2-pq-collapsed .v2-pq-collapse-toggle svg {
    transform: rotate(180deg);
}
.v2-pq-section-bar.v2-pq-collapsed + .v2-pq-section-content,
.v2-pq-subsection-bar.v2-pq-collapsed + .v2-pq-subsection-content {
    display: none;
}

/* ========== QUESTION CARD ========== */
.v2-pq-question {
    max-width: 980px;
    margin: 0 auto;
    padding: 36px 120px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}

.v2-pq-question-inner {
    display: flex;
    flex-direction: column;
}

/* Question divider between cards (matches page bg so cards visually float) */
.v2-pq-divider {
    height: 11px;
    background: var(--v2-pq-bg-color, #F0F2FD);
    border-radius: 0;
}

@media (max-width: 1024px) {
    .v2-pq-question {
        padding: 36px 60px;
    }
}

@media (max-width: 768px) {
    .v2-pq-question {
        padding: 24px 16px;
    }
}

/* ========== QUESTION HEADER ========== */
.v2-pq-q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.v2-pq-q-left {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.v2-pq-q-number {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #667085;
    line-height: 20px;
    position: relative;
    flex-shrink: 0;
}

.v2-pq-mandatory-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #B42318;
    position: absolute;
    top: 0;
    left: -5px;
}

.v2-pq-q-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #344054;
    line-height: 24px;
    flex: 1;
    word-wrap: break-word;
    margin-top: 8px;
}

.v2-pq-q-right {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.v2-pq-q-info-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.v2-pq-q-info-icon:hover svg circle:first-child {
    fill-opacity: 0.2;
}

/* Score badge — Figma node 11759-49643 */
.v2-pq-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0.56px solid #344054;
    border-radius: 4.667px;
    padding: 0px 8px;
    min-height: 24px;
    max-width: 100%;
}

.v2-pq-score-val {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #344054;
    line-height: 21px;
    white-space: nowrap;
}

/* Separator sits in normal flex flow so the badge expands cleanly when
   earned/max contain large numbers (e.g. detractor -50000.00). Earlier
   `position: absolute; left: 50%` parked the slash at the badge midpoint,
   which collided with the wider value once the two sides became asymmetric. */
.v2-pq-score-sep {
    width: 1px;
    height: 16px;
    background: #344054;
    transform: rotate(20deg);
    flex-shrink: 0;
}

/* Instructions popup */
.v2-pq-instructions-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the V2 slider chrome (overlay 100050 + panel 100051) so the
       instructions modal sits on top when triggered from inside a slider
       (e.g. builder Preview slider). */
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.v2-pq-instructions-dialog {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.v2-pq-instructions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #F2F2F2;
}

.v2-pq-instructions-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1F1F1F;
}

.v2-pq-instructions-close {
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-pq-instructions-body {
    padding: 16px 20px 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #3D3D3D;
    overflow-y: auto;
    word-wrap: break-word;
}

/* ========== EXTRA BADGES ========== */
.v2-pq-extras {
    display: flex;
    align-items: center;
    padding: 4px 0;
    flex-wrap: wrap;
}

.v2-pq-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 0px;
    border-radius: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.v2-pq-badge-priority {
    color: #344054;
    background: transparent;
}

.v2-pq-badge-ref {
    background: #FDF4ED;
    color: #B86114;
    padding-right: 8px;
}

.v2-pq-badge-tag {
    color: #344054;
    background: transparent;
}

.v2-pq-badge-dependent {
    background: #FFFAEB;
    color: #B54708;
    padding: 4px 10px;
}

.v2-pq-badge-dependent .v2-pq-badge-icon {
    width: 18px;
    height: 18px;
}

/* Dependency hide — used by JS to show/hide dependent questions */
.v2-pq-dependency-hide {
    display: none !important;
}
.v2-pq-dependency-hide + .v2-pq-divider {
    display: none !important;
}

/* ========== DEPENDENT QUESTION LAYOUT ==========
   Dependent questions have no question number (server sets pqNumber="") so
   the header would otherwise show only the mandatory red dot on its own
   line with the score badge floating top-right. Reflow so the dot sits
   above the question text and the score badge moves onto the same row as
   the text. */
.v2-pq-dependent .v2-pq-question-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
}
.v2-pq-dependent .v2-pq-question-inner > * {
    flex: 0 0 100%;
    max-width: 100%;
}
.v2-pq-dependent .v2-pq-q-header {
    display: contents;
}
.v2-pq-dependent .v2-pq-q-left {
    flex: 0 0 100%;
    order: 5;
}
.v2-pq-dependent .v2-pq-q-left:has(.v2-pq-mandatory-dot) {
    padding-bottom: 8px;
}
.v2-pq-dependent .v2-pq-q-text {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
    order: 6;
}
.v2-pq-dependent .v2-pq-q-right {
    flex: 0 0 auto;
    max-width: none;
    align-self: center;
    order: 7;
}
.v2-pq-dependent .v2-pq-q-text ~ * {
    order: 10;
}

.v2-pq-badge-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Reference Image (Figma node 13438-54377) */
.v2-pq-ref-image-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 16px;
}
.v2-pq-ref-image-label {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #3D3D3D;
    line-height: 20px;
}
.v2-pq-ref-image {
    width: 144px;
    height: 144px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
}

/* ========== ANSWER TYPES ========== */
.v2-pq-answer-area {
    margin-top: 20px;
}

/* --- Single/Multi Select (Radio/Checkbox) --- */
/* Figma node 60:124339 — MCSA/MCMA options stacked vertically, full width */
.v2-pq-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 60%;
    max-width: 762px;
}

.v2-pq-answer-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

/* Figma node 60:123827 — Yes/No (exactly 2 options) lays out side-by-side, equal share */
.v2-pq-answers:has(> .v2-pq-answer-card:nth-child(2):last-child) {
    flex-direction: row;
    flex-wrap: wrap;
}
.v2-pq-answers:has(> .v2-pq-answer-card:nth-child(2):last-child) .v2-pq-answer-card {
    flex: 1 1 0;
    min-width: 200px;
}

/* Figma node 1306:85648 — Checklist (qType=10) always lays out side-by-side, full width */
.v2-pq-question[data-uigroup="checklist"] .v2-pq-answers {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
}
.v2-pq-question[data-uigroup="checklist"] .v2-pq-answer-card {
    flex: 1 1 0;
    min-width: 200px;
}

.v2-pq-answer-card:hover {
    border-color: #AFB9F2;
    background: #FAFBFF;
}

.v2-pq-answer-card.v2-pq-selected {
    background: #F0F2FD;
    border-color: #AFB9F2;
}

.v2-pq-answer-card.v2-pq-selected .v2-pq-answer-text {
    color: #2541DD;
}

/* Radio circle */
.v2-pq-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #C2C2C2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
    margin-top: 2px;
}

.v2-pq-answer-card.v2-pq-selected .v2-pq-radio {
    border-color: #2541DD;
}

.v2-pq-answer-card.v2-pq-selected .v2-pq-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2541DD;
}

/* Checkbox */
.v2-pq-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #C2C2C2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-top: 2px;
}

.v2-pq-answer-card.v2-pq-selected .v2-pq-checkbox {
    border-color: #4F66E4;
    background: #F0F2FD;
}

.v2-pq-answer-card.v2-pq-selected .v2-pq-checkbox::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid #4F66E4;
    border-bottom: 2px solid #4F66E4;
    transform: rotate(-45deg) translateY(-1px);
}

.v2-pq-answer-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #3D3D3D;
    line-height: 20px;
    flex: 1;
}

/* Hidden native inputs */
.v2-pq-answer-card input[type="radio"],
.v2-pq-answer-card input[type="checkbox"] {
    display: none;
}

/* --- Clear Selection Button --- */
.v2-pq-clear-selection {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin-top: 12px;
    background: #FFFFFF;
    border: 1px solid #C2C2C2;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #7A7A7A;
    cursor: pointer;
    transition: border-color 0.2s;
}
.v2-pq-clear-selection:hover {
    border-color: #7A7A7A;
}
.v2-pq-view-mode .v2-pq-clear-selection,
.v2-pq-q-readonly .v2-pq-clear-selection {
    display: none !important;
}

/* Image card inputs — hidden but accessible for <label> native click */
.v2-pq-input-hide {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* --- Image Select --- */
.v2-pq-answers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    align-content: center;
}

.v2-pq-img-card {
    position: relative;
    width: fit-content;
    border-radius: 8px;
    padding: 6px;
    border: 1px solid #D6D6D6;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-pq-img-card:hover {
    border-color: #AFB9F2;
}

/* MCSA (single image) selected state — CSS :checked driven (no JS delay) */
.v2-pq-img-card:has(input:checked),
.v2-pq-img-card.v2-pq-selected {
    background: #F0F2FD;
    border-color: #AFB9F2;
}

/* MCMA (multi image) selected state — CSS :checked driven (no JS delay) */
.v2-pq-question[data-uigroup="multiImg"] .v2-pq-img-card:has(input:checked),
.v2-pq-question[data-uigroup="multiImg"] .v2-pq-img-card.v2-pq-selected {
    background: #EEF4FF;
    border-color: #A4BCFD;
}

.v2-pq-img-card img {
    width: 158px;
    height: 150px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.v2-pq-img-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
}

/* Radio inside image card — unselected */
.v2-pq-img-card .v2-pq-radio {
    width: 16px;
    height: 16px;
    border-radius: 9px;
    border: 1px solid #C2C2C2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Radio inside image card — selected (CSS :checked driven) */
.v2-pq-img-card:has(input:checked) .v2-pq-radio,
.v2-pq-img-card.v2-pq-selected .v2-pq-radio {
    border-color: #2541DD;
}

.v2-pq-img-card:has(input:checked) .v2-pq-radio::after,
.v2-pq-img-card.v2-pq-selected .v2-pq-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2541DD;
}

/* Checkbox inside image card — unselected */
.v2-pq-img-card .v2-pq-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #D0D5DD;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* Checkbox inside image card — selected (CSS :checked driven) */
.v2-pq-img-card:has(input:checked) .v2-pq-checkbox,
.v2-pq-img-card.v2-pq-selected .v2-pq-checkbox {
    border-color: #444CE7;
    background: #EEF4FF;
}

.v2-pq-img-card:has(input:checked) .v2-pq-checkbox::after,
.v2-pq-img-card.v2-pq-selected .v2-pq-checkbox::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid #444CE7;
    border-bottom: 2px solid #444CE7;
    transform: rotate(-45deg) translateY(-1px);
}

.v2-pq-img-expand {
    display: inline-flex;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: #667085;
    padding: 4px;
}

.v2-pq-img-expand svg {
    width: 100%;
    height: 100%;
}

/* --- Descriptive / Textarea --- */
.v2-pq-textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #3D3D3D;
    line-height: 24px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.v2-pq-textarea:focus {
    border-color: #AFB9F2;
}

.v2-pq-textarea::placeholder {
    color: #999999;
}

/* --- Short Answer / Text Input --- */
.v2-pq-text-input {
    width: 100%;
    height: 52px;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #3D3D3D;
    line-height: 24px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.v2-pq-text-input:focus {
    border-color: #AFB9F2;
}

.v2-pq-text-input::placeholder {
    color: #999999;
}

.v2-pq-text-input:disabled,
.v2-pq-text-input.v2-pq-disabled {
    background: #F2F2F2;
    color: #999999;
    cursor: not-allowed;
}

/* --- Phone Input (valType=9, intl-tel-input v16 separateDialCode mode) ----
   Generic shell used for ALL questionnaire flows (public + authenticated).
   Mirrors .v2-pub-phone-wrap from public_create_evaluation_v2.css but uses
   the V2 questionnaire input height (52px) and border radius so it slots
   into v2-pq-text-input's visual language. */
.v2-pq-phone-wrap {
    position: relative;
    width: 100%;
}
.v2-pq-phone-wrap .iti {
    width: 100%;
    display: block;
    position: relative;
    height: 52px;
    box-sizing: border-box;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    background: #FFFFFF;
    transition: border-color 0.2s ease;
}
.v2-pq-phone-wrap .iti:focus-within {
    border-color: #AFB9F2;
}
.v2-pq-phone-wrap.error .iti,
.v2-pq-error .v2-pq-phone-wrap .iti {
    border-color: #E04545;
}
.v2-pq-phone-wrap .iti--separate-dial-code .iti__flag-container {
    height: 100%;
    border-right: 1px solid #EBEBEB;
}
.v2-pq-phone-wrap .iti--separate-dial-code .iti__selected-flag {
    height: 100%;
    padding: 0 12px 0 14px;
    border-radius: 8px 0 0 8px;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    gap: 4px;
}
.v2-pq-phone-wrap .iti--separate-dial-code .iti__selected-flag:hover,
.v2-pq-phone-wrap .iti--separate-dial-code .iti__flag-container:hover .iti__selected-flag {
    background: #F2F2F2;
}
.v2-pq-phone-wrap .iti--separate-dial-code .iti__selected-dial-code {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #1F1F1F;
    margin-left: 0;
}
.v2-pq-phone-wrap .iti__arrow {
    width: 20px;
    height: 20px;
    margin-left: 0;
    border: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 7.5l5 5 5-5' stroke='%231F1F1F' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/></svg>") center center / 20px 20px no-repeat;
    transition: transform 0.15s ease;
}
.v2-pq-phone-wrap .iti__arrow--up {
    transform: rotate(180deg);
    border: none;
}
/* The plugin sets padding-left inline to clear the absolute flag container —
   keep that, only override the rest so the input borders into the V2 shell. */
.v2-pq-phone-wrap .iti input[type="tel"].v2-pq-phone-input {
    width: 100%;
    height: 100%;
    padding-top: 0;
    padding-right: 16px;
    padding-bottom: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    outline: none;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #3D3D3D;
}
.v2-pq-phone-wrap .iti input[type="tel"].v2-pq-phone-input::placeholder {
    color: #999999;
}
.v2-pq-phone-wrap .iti input[type="tel"].v2-pq-phone-input:disabled {
    background: #F2F2F2;
    color: #999999;
    cursor: not-allowed;
}
/* When dropdownContainer: document.body is set, the country list is appended
   to <body>, so its stacking context is the page root. The V2 questionnaire
   stacks elements up to ~200000 (sticky section bar, slider, error bar), so
   the plugin's default z-index of 1060 hides the dropdown behind them. Lift
   above everything in the questionnaire. !important is required because the
   plugin's intlTelInput.css is lazy-loaded into <head> *after* this file at
   runtime, so without it the plugin's z-index: 1060 wins by load order.
   Covers both class-naming conventions — v16 emits `.iti--container` /
   `.iti__country-list`, the bundled v6.4.1 emits `.intl-tel-input.iti-container`
   / `.country-list`. */
.iti--container,
.intl-tel-input.iti-container {
    z-index: 200100 !important;
    position: absolute !important;
}
.iti--container .iti__country-list,
.intl-tel-input.iti-container .country-list {
    z-index: 200100 !important;
}

/* --- Score Input --- */
.v2-pq-score-input {
    width: 100%;
    height: 52px;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #3D3D3D;
    text-align: left;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.v2-pq-score-input:focus {
    border-color: #AFB9F2;
}

/* --- Rating --- */
.v2-pq-rating-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 60%;
}

.v2-pq-rating-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-pq-rating-label {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #1F1F1F;
}

/* ≤4 options: horizontal radio layout */
.v2-pq-rating-options {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.v2-pq-rating-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
}

.v2-pq-rating-opt input[type="radio"] {
    display: none;
}

.v2-pq-rating-radio {
    width: 16px;
    height: 16px;
    border: 1px solid #C2C2C2;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.v2-pq-rating-opt input[type="radio"]:checked + .v2-pq-rating-radio {
    border-color: #2541DD;
}

.v2-pq-rating-opt input[type="radio"]:checked + .v2-pq-rating-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2541DD;
}

.v2-pq-rating-opt-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #3D3D3D;
    text-align: center;
    white-space: nowrap;
}

/* >4 options: custom dropdown — Figma node 11765-49966 */
.v2-pq-rating-dd-wrap {
    position: relative;
    width: 100%;
}

.v2-pq-rating-dd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    padding: 10px 14px;
    background: #F6F7FE;
    border: 1px solid #AFB9F2;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.v2-pq-rating-dd-trigger:hover {
    border-color: #2541DD;
}

.v2-pq-rating-dd-trigger.v2-pq-dd-open {
    border-color: #2541DD;
}

.v2-pq-rating-dd-trigger:has(.v2-pq-rating-dd-text.v2-pq-dd-selected) {
    background: #FFFFFF;
}

.v2-pq-rating-dd-text {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2541DD;
}

.v2-pq-rating-dd-text.v2-pq-dd-selected {
    color: #2541DD;
}

.v2-pq-rating-dd-chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
    color: #2541DD;
    width: 20px;
    height: 20px;
}

.v2-pq-rating-dd-trigger.v2-pq-dd-open .v2-pq-rating-dd-chevron {
    transform: rotate(180deg);
}

.v2-pq-rating-dd-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #AFB9F2;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    z-index: 10;
    max-height: 220px;
    overflow-y: auto;
}

.v2-pq-rating-dd-menu.v2-pq-dd-open {
    display: block;
}

.v2-pq-rating-dd-item {
    padding: 10px 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #5C5C5C;
    cursor: pointer;
    transition: background 0.12s;
}

.v2-pq-rating-dd-item:hover {
    background: #F6F7FE;
}

.v2-pq-rating-dd-item.v2-pq-dd-active {
    color: #2541DD;
    background: #F0F2FD;
}

/* --- NPS (Figma node 13448:55287) --- */
.v2-pq-nps-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-pq-nps-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 762px;
}

.v2-pq-nps-item {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    color: #1F1F1F;
    transition: all 0.15s;
    flex-shrink: 0;
    box-sizing: border-box;
}

.v2-pq-nps-item:hover {
    background: #F6F7FE;
    border-color: #4F66E4;
}

.v2-pq-nps-item.v2-pq-selected {
    background: #F0F2FD;
    border-color: #AFB9F2;
    color: #2541DD;
}

.v2-pq-nps-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 762px;
}

.v2-pq-nps-label {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #5C5C5C;
}

/* --- Category / Dropdown Select --- */
.v2-pq-dropdown-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-pq-dropdown-label {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #1F1F1F;
    line-height: 24px;
}

.v2-pq-dropdown-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F6F7FE;
    border: 1px solid #AFB9F2;
    border-radius: 8px;
    height: 52px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.v2-pq-dropdown-field:hover {
    border-color: #2541DD;
}

.v2-pq-dropdown-placeholder {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #2541DD;
    line-height: 24px;
}

.v2-pq-dropdown-chevron {
    width: 20px;
    height: 20px;
    color: #2541DD;
    flex-shrink: 0;
}

/* Query Dropdown styles moved to query_dropdown_v2.css (reusable component) */

/* --- Location (Figma node 11759-46759) --- */
.v2-pq-location-wrap {
    width: 60%;
}

.v2-pq-location-detect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    background: #F0F2FD;
    border: 1px solid #AFB9F2;
    border-radius: 8px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #2541DD;
}

.v2-pq-location-detect:hover {
    background: #E4E7FB;
}

.v2-pq-location-detecting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    background: #F0F2FD;
    border: 1px solid #AFB9F2;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #2541DD;
    opacity: 0.7;
}

.v2-pq-location-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    padding: 12px 16px;
}

.v2-pq-location-coords {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.v2-pq-location-label {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #5C5C5C;
}

.v2-pq-location-val {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #1F1F1F;
    margin-right: 8px;
}

.v2-pq-location-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.v2-pq-location-clear:hover {
    background: #E5E7EB;
}

/* Error state */
.v2-pq-error .v2-pq-location-detect {
    border-color: #F96966;
}

/* --- Stopwatch (Figma node 11759-46761) --- */
.v2-pq-stopwatch-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.v2-pq-stopwatch-display {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: #999999;
    letter-spacing: 1.76px;
    line-height: 20px;
}

.v2-pq-stopwatch-display.v2-pq-sw-running {
    color: #2541DD;
}

.v2-pq-stopwatch-display.v2-pq-sw-has-time {
    color: #344054;
}

.v2-pq-sw-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v2-pq-sw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 24px;
    width: 100px;
    border-radius: 8px;
    background: #F0F2FD;
    border: 1px solid #AFB9F2;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #2541DD;
    cursor: pointer;
    transition: background 0.15s;
    box-sizing: border-box;
}

.v2-pq-sw-btn:hover {
    background: #E4E8FC;
}

.v2-pq-sw-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Stop button — red variant */
.v2-pq-sw-btn-stop {
    background: #FEF2F2;
    border-color: #FDA29B;
    color: #B42318;
}

.v2-pq-sw-btn-stop:hover {
    background: #FEE2E2;
}

/* Reset button — neutral variant */
.v2-pq-sw-btn-reset {
    background: #fff;
    border-color: #D6D6D6;
    color: #5C5C5C;
}

.v2-pq-sw-btn-reset:hover {
    background: #F5F5F5;
}

/* --- Signature --- */
.v2-pq-signature-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Initial state: placeholder text + Sign button */
.v2-pq-signature-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    width: 100%;
}

.v2-pq-signature-placeholder {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #999;
}

.v2-pq-signature-sign-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 24px;
    width: fit-content;
    background: #F0F2FD;
    border: 1px solid #AFB9F2;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #2541DD;
    cursor: pointer;
    transition: background 0.15s;
}

.v2-pq-signature-sign-btn:hover {
    background: #E4E7FB;
}

.v2-pq-signature-sign-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Signed state: preview */
.v2-pq-signature-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.v2-pq-signature-preview-img {
    height: 80px;
    object-fit: contain;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    background: #FAFAFA;
    width: fit-content;
}

/* --- Signature Modal (Figma common popup pattern) --- */
.v2-pq-sig-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.v2-pq-sig-modal-overlay.v2-pq-sig-modal-visible {
    opacity: 1;
    pointer-events: auto;
}

.v2-pq-sig-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.v2-pq-sig-modal {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08),
                0 8px 8px -4px rgba(16, 24, 40, 0.03);
    width: 520px;
    max-width: 90vw;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transform: scale(0.93);
    transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.v2-pq-sig-modal-overlay.v2-pq-sig-modal-visible .v2-pq-sig-modal {
    transform: scale(1);
}

/* Modal header */
.v2-pq-sig-modal-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-pq-sig-modal-title {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #1F1F1F;
    margin: 0;
}

.v2-pq-sig-modal-desc {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #7A7A7A;
    margin: 0;
}

/* Modal canvas area */
.v2-pq-sig-modal-canvas-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.v2-pq-sig-modal-canvas-wrap .v2-pq-signature-pad {
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    background: #FAFAFA;
    width: 100%;
    height: 200px;
}

.v2-pq-sig-modal-clear {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #C2C2C2;
    background: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #5C5C5C;
    cursor: pointer;
    transition: background 0.15s;
}

.v2-pq-sig-modal-clear:hover {
    background: #F5F5F5;
}

/* Modal action buttons — Figma common popup pattern */
.v2-pq-sig-modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.v2-pq-sig-modal-btn {
    flex: 1;
    padding: 10px 18px;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.v2-pq-sig-modal-cancel {
    background: #fff;
    border-color: #C2C2C2;
    color: #5C5C5C;
}

.v2-pq-sig-modal-cancel:hover {
    background: #F5F5F5;
}

.v2-pq-sig-modal-done {
    background: #2541DD;
    border-color: #2541DD;
    color: #fff;
}

.v2-pq-sig-modal-done:hover {
    background: #1E35B5;
    border-color: #1E35B5;
}

/* --- Attachment Only (type 48) --- */
.v2-pq-attachment-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.v2-pq-attachment-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed #D6D6D6;
    border-radius: 8px;
    background: #FAFAFA;
    cursor: pointer;
    transition: border-color 0.2s;
}

.v2-pq-attachment-btn:hover {
    border-color: #AFB9F2;
}

/* --- Auto-calculated Info Banner --- */
.v2-pq-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    background: #F6F7FE;
    border: 1px solid #8C9BED;
    border-radius: 8px;
}

.v2-pq-info-banner-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #2541DD;
}

.v2-pq-info-banner-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #2541DD;
    line-height: 18px;
}

/* ========== COMMENT & ATTACHMENT (per question, Figma node 11759-46735) ========== */
.v2-pq-comment-attach {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    margin-top: 20px;
}

.v2-pq-attach-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-top: 8px;
}

.v2-pq-camera-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #667085;
    transition: color 0.15s;
}

.v2-pq-camera-icon:hover {
    color: #344054;
}

.v2-pq-attach-label {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #667085;
    line-height: 18px;
}

/* Prominent attach variant (Figma 2591:83710) — used when hideAnswerOption=true.
   Full-width row with descriptive label on the left and bordered "Attach"
   button on the right; replaces the compact icon trigger. */
.v2-pq-attach-section.v2-pq-attach-prominent {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    padding-top: 4px;
    width: 100%;
    gap: 12px;
}
.v2-pq-attach-prominent-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #999999;
}
.v2-pq-attach-prominent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    min-width: 100px;
    padding: 12px 24px;
    background: #F0F2FD;
    border: 1px solid #AFB9F2;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #2541DD;
    cursor: pointer;
    user-select: none;
}
.v2-pq-attach-prominent-btn:hover {
    background: #E4E8FB;
}

.v2-pq-comment-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #A4BCFD;
    padding: 6px 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #3D3D3D;
    outline: none;
    background: transparent;
    resize: none;
    overflow-y: auto;
    min-height: 32px;
    max-height: 52px;
    display: block;
    box-sizing: border-box;
}

.v2-pq-comment-input::placeholder {
    color: #667085;
}

.v2-pq-comment-input:focus {
    border-bottom: 1px solid #A4BCFD !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Evidence preview row (Figma node 12134-151124) */
.v2-pq-evidence-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.v2-pq-evidence-thumbs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v2-pq-ev-thumb {
    width: 64px;
    height: 64px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid #AFB9F2;
    cursor: pointer;
    flex-shrink: 0;
}

/* Doc/Video icon card preview */
.v2-pq-ev-icon-card {
    background: #F0F2FD;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: unset;
}
.v2-pq-ev-icon-card svg {
    width: 36px;
    height: 36px;
}

.v2-pq-ev-more {
    width: 64px;
    height: 64px;
    border-radius: 9px;
    background: #F0F2FD;
    border: 1px solid #AFB9F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.v2-pq-ev-more-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #4F66E4;
    text-align: center;
    line-height: 1.3;
}

.v2-pq-evidence-delete {
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    color: #DC171A;
    transition: opacity 0.15s;
}

.v2-pq-evidence-delete:hover {
    opacity: 0.7;
}

/* Download All / Download link in the evidence row — visible whenever
   the question has submitted (perm) evidences. */
.v2-pq-evidence-download {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4F66E4;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.v2-pq-evidence-download:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.v2-pq-ev-file-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #F2F2F2;
    border-radius: 6px;
    border: 1px solid #EBEBEB;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: #5C5C5C;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hidden file input */
.v2-pq-file-input {
    display: none;
}

.v2-pq-attach-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Upload progress spinner */
.v2-pq-ev-uploading {
    width: 64px;
    height: 64px;
    border-radius: 9px;
    background: #F0F2FD;
    border: 1px solid #AFB9F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v2-pq-ev-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #C7CEFC;
    border-top-color: #4F66E4;
    border-radius: 50%;
    animation: v2PqEvSpin 0.8s linear infinite;
}

@keyframes v2PqEvSpin {
    to { transform: rotate(360deg); }
}

/* Evidence Viewer now uses reusable attachment_preview_v2.css component */

/* ========== CREATE TASK (INTERIM TASK) — Figma node 60:123857 ========== */
.v2-pq-create-task-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
}

.v2-pq-create-task-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #4F66E4;
    cursor: pointer;
    white-space: nowrap;
}

.v2-pq-create-task-btn:hover {
    text-decoration: underline;
}

.v2-pq-view-tasks-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #7A7A7A;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.v2-pq-view-tasks-btn:hover {
    color: #5A5A5A;
}

/* Task progress pill (mirrors old `.tasks-summary` block —
   "Tasks: Partially Done(1/2) View Tasks") — sits between the
   Create Task and View Tasks buttons inside `.v2-pq-create-task-wrap`. */
.v2-pq-task-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4A4A4A;
    white-space: nowrap;
}
.v2-pq-task-progress-label { color: #7A7A7A; font-weight: 500; }
.v2-pq-task-progress-status { font-weight: 600; }
.v2-pq-task-done { color: #097a4a; }
.v2-pq-task-partial { color: #b86114; }
.v2-pq-task-not-started { color: #b42318; }

/* Approval banner (Filled by / To be filled by You / Not to be
   filled by you) — mirrors old UI `.approval-message-forms`. */
.v2-pq-approval-banner {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}
.v2-pq-banner-mlra-current-level {
    background: #FFF6E6;
    color: #B86114;
}
.v2-pq-banner-mlra-other-level {
    background: #F0F2FD;
    color: #4F66E4;
}
/* Banner-only render (public-flow L1+ ast=true question — mirrors old UI
   public_create_dc.jsp: the question body is suppressed, only the
   "Not to be filled by you" banner remains). Slimmer padding than a full
   question card so the hidden-question slot doesn't dominate the layout. */
.v2-pq-question-banner-only {
    padding-top: 16px;
    padding-bottom: 16px;
}
.v2-pq-question-banner-only .v2-pq-approval-banner {
    margin-bottom: 0;
}

/* In view-only mode keep the "Filled by"/"To be filled" banner and
   the task progress pill visible — they are read-only context, not
   submission affordances. Only hide the action buttons. */
.v2-pq-view-mode .v2-pq-create-task-wrap .v2-pq-create-task-btn { display: none; }

/* ========== TASKS POPUP — Figma node 274:67713 ========== */
.v2-pq-view-tasks-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10050;
    display: none;
}
.v2-pq-view-tasks-overlay.active { display: block; }

.v2-pq-view-tasks-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 11.1px rgba(0, 0, 0, 0.25);
    z-index: 10051;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
}
.v2-pq-view-tasks-popup.active { display: flex; }

.v2-pq-vt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
}

.v2-pq-vt-title {
    flex: 1;
    min-width: 0;
}
.v2-pq-vt-title-main {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #1F1F1F;
}
.v2-pq-vt-title-count {
    margin-left: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: #7A7A7A;
}

.v2-pq-vt-close {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6B7280;
    flex-shrink: 0;
}
.v2-pq-vt-close:hover { background: #F2F4F7; color: #1F1F1F; }

.v2-pq-vt-body {
    flex: 1;
    overflow-y: auto;
}

.v2-pq-vt-task-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #EBEBEB;
    cursor: pointer;
}
.v2-pq-vt-task-row:last-child { border-bottom: none; }

.v2-pq-vt-task-top {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}

.v2-pq-vt-task-title {
    flex: 1;
    min-width: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 18.9px;
    color: #1F1F1F;
    word-break: break-word;
}

.v2-pq-vt-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #344054;
    transition: transform 0.15s ease;
}
.v2-pq-vt-task-row.v2-pq-vt-expanded .v2-pq-vt-chevron {
    transform: rotate(180deg);
}

.v2-pq-vt-task-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 35px;
    width: 100%;
}
/* Let the assignee flex-grow so the status chip + chevron are pushed right */
.v2-pq-vt-task-meta .v2-pq-vt-assignee { flex: 1 1 0; }

.v2-pq-vt-assignee {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.v2-pq-vt-assignee .v2-avatar,
.v2-pq-vt-avatar {
    width: 26px;
    height: 26px;
    border: 1px solid #EBEBEB;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
}
.v2-pq-vt-assignee .v2-avatar-initials {
    font-size: 10px;
}

.v2-pq-vt-assignee-name {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15.4px;
    color: #3D3D3D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-pq-vt-due {
    flex-shrink: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15.4px;
    color: #3D3D3D;
}

/* ---- Status chip — Figma node 274:67843 (L1+ interim tasks) ---- */
.v2-pq-vt-status {
    flex-shrink: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.35;
    padding: 2px 4px;
    border-radius: 2px;
    white-space: nowrap;
}
.v2-pq-vt-status-open {
    background: #F6F7FE;
    color: #2541DD;
}
.v2-pq-vt-status-completed {
    background: #F6FEF9;
    color: #027A48;
}

/* ---- Collapsible DETAILS section — Figma node 274:67716 ---- */
.v2-pq-vt-details {
    display: none;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 12px;
}
.v2-pq-vt-task-row.v2-pq-vt-expanded .v2-pq-vt-details {
    display: flex;
}

.v2-pq-vt-details-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.v2-pq-vt-details-label {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #7A7A7A;
    letter-spacing: 0.02em;
}
.v2-pq-vt-details-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #3D3D3D;
    white-space: pre-wrap;
    word-break: break-word;
}
.v2-pq-vt-details-text.v2-pq-vt-details-empty {
    color: #7A7A7A;
    font-style: italic;
}

.v2-pq-vt-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.v2-pq-vt-att-thumb {
    width: 180px;
    height: 180px;
    border-radius: 4px;
    overflow: hidden;
    background: #F2F4F7;
    flex-shrink: 0;
}
.v2-pq-vt-att-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v2-pq-vt-att-thumb-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: #7A7A7A;
    text-align: center;
}
.v2-pq-vt-att-fname {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    color: #3D3D3D;
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.v2-pq-vt-empty {
    padding: 32px 0;
    text-align: center;
    color: #6B7280;
    font-size: 13px;
}


/* ========== MARK NOT APPLICABLE ========== */
/* N/A wrapper */
.v2-pq-na-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.v2-pq-na-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #344054;
    line-height: 18px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.v2-pq-na-btn:hover {
    background: #F9FAFB;
}

/* N/A active state — "Marked Not Applicable" + Undo */
.v2-pq-na-marked {
    display: flex;
    align-items: center;
    gap: 16px;
}

.v2-pq-na-label {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #D92420;
    white-space: nowrap;
}

.v2-pq-na-undo-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #3D3D3D;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.v2-pq-na-undo-btn:hover {
    background: #2D2D2D;
}

.v2-pq-na-undo-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* ========== PREVIOUS-SUBMISSION LINK (audit only) ========== */
/* Figma 3046:88340 — placeholder for the eventual "Hide N/A" /
 * "Mark low compliance" checkbox group. Only the preview link
 * is rendered for now; the 24px left indent reserves the space
 * the checkboxes will occupy so adding them later doesn't shift
 * the link's alignment. */
.v2-pq-prev-submission-wrap {
    background: #FFFFFF;
    padding: 16px 24px;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    flex-shrink: 0;
}

.v2-pq-prev-submission-link {
    display: inline-block;
    margin-left: 24px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #2541DD;
    text-decoration: underline;
    cursor: pointer;
}

.v2-pq-prev-submission-link:hover,
.v2-pq-prev-submission-link:focus {
    color: #2541DD;
    text-decoration: underline;
}

/* ========== SECTION SCORE ========== */
.v2-pq-section-score {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 36px 120px;
    background: #F2F2F2;
    border-bottom: 4px solid #FFFFFF;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.v2-pq-section-wrap:last-of-type .v2-pq-section-score {
    border-bottom: none;
}

.v2-pq-section-score-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.v2-pq-section-score-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #4F66E4;
}

.v2-pq-section-score-value {
    display: flex;
    align-items: baseline;
}

.v2-pq-section-score-int {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 30px;
    color: #000;
}

.v2-pq-section-score-dec {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #000;
}

.v2-pq-section-score-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 250px;
}

.v2-pq-section-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-pq-section-score-label {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #5C5C5C;
}

.v2-pq-section-score-val {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
}

.v2-pq-section-score-val.v2-pq-deducted {
    color: #B9134B;
}

/* Detractor variant (Figma node 60:124269) — pink panel when a section-level
   (detractorType==1) detractor option is selected on any question in the
   section. */
.v2-pq-section-score.v2-pq-section-score--detractor {
    background: #FEF6F9;
    border-bottom: none;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* "Detractor Selected" pill (Figma node 1165:78188) — sits above the
   Section/Overall title with a 6px gap when the detractor variant is
   active. Hidden by default; shown only when the panel has the
   --detractor modifier. */
.v2-pq-detractor-tag {
    display: none;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    background: #DC171A;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    padding: 2px 12px;
}

/* Section panel: parent `.v2-pq-section-score-left` has gap:12px, so a
   -6px bottom margin yields a 6px tag→title gap. */
.v2-pq-section-score--detractor .v2-pq-detractor-tag {
    display: inline-flex;
    margin-bottom: -6px;
}

/* Overall panel: parent `.v2-pq-overall-score-left` has gap:12px, so a
   -6px bottom margin yields a 6px tag→title gap. */
.v2-pq-overall-score--detractor .v2-pq-detractor-tag {
    display: inline-flex;
    margin-bottom: -6px;
}

/* ========== SECTION-TO-OVERALL SEPARATOR ========== */
.v2-pq-score-separator {
    height: 10px;
    background: transparent;
}

.v2-pq-score-separator-white {
    height: 0px;
    background: #FFFFFF;
}

/* ========== OVERALL SCORE (Figma node 1-8204) ========== */
.v2-pq-overall-score {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 36px 120px;
    background: #e4e8fb;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.v2-pq-overall-score-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.v2-pq-overall-score-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #4F66E4;
}

.v2-pq-overall-score-value {
    display: flex;
    align-items: baseline;
}

.v2-pq-overall-score-int {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 30px;
    color: #000;
}

.v2-pq-overall-score-dec {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #000;
}

.v2-pq-overall-score-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 250px;
}

.v2-pq-overall-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-pq-overall-score-label {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #5C5C5C;
}

.v2-pq-overall-score-val {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
}

.v2-pq-overall-score-val.v2-pq-deducted {
    color: #B9134B;
}

/* Detractor variant (Figma node 60:124269) — pink panel when a process-level
   (detractorType==2) detractor option is selected on any question. */
.v2-pq-overall-score.v2-pq-overall-score--detractor {
    background: #FEF6F9;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* ========== VALIDATION ERROR BAR ========== */
.v2-pq-error-bar {
    display: flex;
    align-items: center;
    padding: 16px max(24px, calc((100% - 980px) / 2));
    background: #FEF0C7;
    box-shadow: none !important;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
}
.v2-pq-error-bar-msg {
    flex: 1;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    line-height: 1.3;
    white-space: pre-line;
}
.v2-pq-error-bar-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
.v2-pq-error-bar-arrow {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.v2-pq-error-bar-arrow:hover {
    opacity: 0.7;
}
.v2-pq-error-bar-count {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    white-space: nowrap;
}
.v2-pq-error-bar-close {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 36px;
    padding: 4px;
}
.v2-pq-error-bar-close:hover {
    opacity: 0.7;
}

/* ========== VALIDATION ERROR HIGHLIGHT ========== */
.v2-pq-error-highlight {
    background: #FFFAEB !important;
}

/* ========== CALCULATE BUTTON (Master process formula fields) ==========
   Outline-style sibling of the submit button, shown only when formula
   inputs exist. process_calculate_v2.js toggles visibility. */
.v2-pq-calc-wrap {
    display: flex;
    justify-content: center;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 120px 20px;
    box-sizing: border-box;
    background: #fff;
}
.v2-pq-calc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 200px;
    height: 44px;
    padding: 0 24px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #4F66E4;
    color: #4F66E4;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.v2-pq-calc-btn:hover {
    background: #F0F2FD;
}
.v2-pq-calc-input {
    background: #FAFAFA !important;
    color: #5C5C5C !important;
    cursor: not-allowed;
}
.v2-pq-calc-input::placeholder { color: #999; }

@media (max-width: 1024px) {
    .v2-pq-calc-wrap {
        padding: 0 60px 36px;
    }
}
@media (max-width: 768px) {
    .v2-pq-calc-wrap {
        padding: 0 16px 24px;
    }
}

/* ========== BOTTOM SUBMIT (Figma node 1252-79742 / 1306-85874) ========== */
.v2-pq-submit-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 24px max(24px, calc((100% - 980px) / 2));
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.15);
    margin-top: auto;
    align-items: center;
}

.v2-pq-submit-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 200px;
    height: 44px;
    padding: 0 24px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    border-radius: 4px;
    cursor: not-allowed;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    background: #7A7A7A;
    border: 1px solid #7A7A7A;
    color: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    grid-column: 2;
    justify-self: center;
}

.v2-pq-submit-bottom.v2-pq-submit-active {
    background: #4F66E4;
    border: 1px solid #4F66E4;
    color: #FFFFFF;
    cursor: pointer;
}

.v2-pq-submit-bottom.v2-pq-submit-active:hover {
    background: #3D52C7;
    border-color: #3D52C7;
}

/* ----- "Copy answers to a new form" checkbox (Figma 1306-85874) -----
   Sits in the left cell of the 3-col submit-footer grid so the Submit
   button stays centered regardless of the label's presence/length.
   Mirrors old UI CACheckBox (todo_create_report.jsp:1173). */
.v2-pq-copy-answers {
    /* `position: relative` contains the absolutely-positioned input. Without
       it the input anchors to the nearest positioned ancestor (.v2-pq-container)
       far above the label, so focusing it on click triggers the browser to
       scroll the input into view — the submit footer visibly jumps up. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    grid-column: 1;
    justify-self: start;
    margin: 0;
}

.v2-pq-copy-answers-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.v2-pq-copy-answers-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1.25px solid #C2C2C2;
    border-radius: 4px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    flex-shrink: 0;
}

.v2-pq-copy-answers-box svg {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.v2-pq-copy-answers-input:checked + .v2-pq-copy-answers-box {
    background: #4F66E4;
    border-color: #4F66E4;
}

.v2-pq-copy-answers-input:checked + .v2-pq-copy-answers-box svg {
    opacity: 1;
}

.v2-pq-copy-answers-input:focus-visible + .v2-pq-copy-answers-box {
    box-shadow: 0 0 0 3px rgba(79, 102, 228, 0.25);
}

.v2-pq-copy-answers-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: #3D3D3D;
    word-break: break-word;
}

/* ========== ERROR STATES (Figma node 12136-152391) ========== */

/* Input / textarea / score border */
.v2-pq-error .v2-pq-text-input,
.v2-pq-error .v2-pq-textarea,
.v2-pq-error .v2-pq-score-input {
    border-color: #F96966;
}

/* Option card border (radio/checkbox) */
.v2-pq-error .v2-pq-answer-card {
    border-color: #F96966;
}

/* Question-level error message — below answer area */
.v2-pq-error-msg {
    display: none;
    align-items: center;
    gap: 2px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #D92420;
    margin-top: 8px;
}

.v2-pq-error-msg .v2-pq-error-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Comment error */
.v2-pq-comment-error .v2-pq-comment-input {
    border-bottom-color: #F96966;
}

.v2-pq-comment-error-msg {
    display: none;
    align-items: center;
    gap: 2px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #D92420;
    margin-top: 4px;
}

.v2-pq-comment-error-msg .v2-pq-error-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ========== SHIMMER LOADING STATE — mirrors V2 form layout ========== */
@keyframes v2PqShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.v2-pq-shimmer {
    background: linear-gradient(90deg, #F2F2F2 25%, #E6E6E6 37%, #F2F2F2 63%);
    background-size: 800px 100%;
    animation: v2PqShimmer 1.6s ease-in-out infinite;
    border-radius: 4px;
}

.v2-pq-loading {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--v2-pq-bg-color, #F0F2FD);
}

/* ----- Header (mirrors .v2-pq-header) ----- */
.v2-pq-shimmer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid #F2F2F2;
    flex-shrink: 0;
}

.v2-pq-shimmer-logo {
    width: 136px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
}

.v2-pq-shimmer-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.v2-pq-shimmer-header .v2-pq-shimmer-title {
    width: 280px;
    height: 22px;
}

.v2-pq-shimmer-header .v2-pq-shimmer-subtitle {
    width: 200px;
    height: 16px;
}

.v2-pq-shimmer-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    width: 252px;
    justify-content: flex-end;
}

.v2-pq-shimmer-header-btn {
    width: 120px;
    height: 42px;
    border-radius: 6px;
}

/* ----- Body (scrollable, page-color background reveals dividers) ----- */
.v2-pq-shimmer-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--v2-pq-bg-color, #F0F2FD);
}

/* ----- Section bar (mirrors .v2-pq-section-bar layout) ----- */
.v2-pq-shimmer-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #fff;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 1px solid #F2F2F2;
}

.v2-pq-shimmer-pill {
    width: 57px;
    height: 31px;
    border-radius: 4px;
}

.v2-pq-shimmer-section-name {
    width: 180px;
    height: 18px;
}

/* ----- Subsection bar (mirrors .v2-pq-subsection-bar layout) ----- */
.v2-pq-shimmer-subsection {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #fff;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.v2-pq-shimmer-subsec-num {
    width: 28px;
    height: 16px;
}

.v2-pq-shimmer-subsec-name {
    width: 160px;
    height: 16px;
}

/* ----- Question card (mirrors .v2-pq-question — white, max-width 980, padding 36 120) ----- */
.v2-pq-shimmer-question {
    background: #fff;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 120px;
    box-sizing: border-box;
}

.v2-pq-shimmer-q-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.v2-pq-shimmer-q-num {
    width: 36px;
    height: 18px;
}

.v2-pq-shimmer-q-score {
    width: 78px;
    height: 24px;
    border-radius: 12px;
}

.v2-pq-shimmer-question .v2-pq-shimmer-q-text {
    height: 18px;
    margin-bottom: 10px;
    width: 90%;
}

.v2-pq-shimmer-question .v2-pq-shimmer-q-text-sm {
    width: 60%;
    margin-bottom: 24px;
}

/* ----- Answer options list (mirrors .v2-pq-answers — vertical option rows) ----- */
.v2-pq-shimmer-opt-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 60%;
    max-width: 762px;
    margin-bottom: 20px;
}

.v2-pq-shimmer-opt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #EAEAEA;
    border-radius: 6px;
    background: #FAFAFA;
}

.v2-pq-shimmer-opt-bullet {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

.v2-pq-shimmer-opt-label {
    flex: 1;
    height: 14px;
    max-width: 320px;
}

/* ----- Comment + attachment row (camera right of input) ----- */
.v2-pq-shimmer-attach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.v2-pq-shimmer-attach-input {
    flex: 1;
    height: 36px;
    border-radius: 4px;
}

.v2-pq-shimmer-camera {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.v2-pq-shimmer-comment-link {
    width: 110px;
    height: 16px;
}

/* ----- Divider between question cards (mirrors .v2-pq-divider, 11px page-color) ----- */
.v2-pq-shimmer-divider {
    height: 11px;
    background: var(--v2-pq-bg-color, #F0F2FD);
}

/* ----- Bottom CTA bar (mirrors .v2-pq-submit-footer) ----- */
.v2-pq-shimmer-cta {
    padding: 24px 36px;
    background: #fff;
    border-top: 1px solid #F2F2F2;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.v2-pq-shimmer-cta-btn {
    width: 200px;
    height: 44px;
    border-radius: 6px;
}

@media (max-width: 1024px) {
    .v2-pq-shimmer-question { padding: 36px 60px; }
}

@media (max-width: 768px) {
    .v2-pq-shimmer-question { padding: 24px 16px; }
    .v2-pq-shimmer-header-right { width: auto; }
    .v2-pq-shimmer-header-btn:first-child { display: none; }
    .v2-pq-shimmer-q-with-ref { flex-direction: column; }
    .v2-pq-shimmer-ref-img { width: 100%; height: 180px; }
}

/* ========== SENSEAI QUESTION ========== */
.v2-pq-senseai-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(160.43deg, rgba(123, 139, 234, 0.2) 1.11%, rgba(249, 185, 206, 0.2) 94.22%);
    border-radius: 0 12px 12px 0;
    padding: 8px 12px;
    margin-left: -36px;
    margin-right: 0;
    width: fit-content;
}

.v2-pq-senseai-logo {
    width: 16px;
    height: 16px;
}

.v2-pq-senseai-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    background: linear-gradient(to bottom, #5845FF, #DC1759);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.v2-pq-capture-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid #7B8BEA;
    border-radius: 8px;
    background: linear-gradient(160.43deg, rgba(123, 139, 234, 0.1) 1.11%, rgba(249, 185, 206, 0.1) 94.22%);
    cursor: pointer;
    transition: opacity 0.15s;
}

.v2-pq-capture-btn:hover {
    opacity: 0.8;
}

.v2-pq-capture-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    background: linear-gradient(to bottom, #5845FF, #DC1759);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== FILE UPLOAD STYLING ========== */
.v2-pq-file-uploader {
    margin-top: 8px;
}

.v2-pq-file-uploader .qq-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* ========== IMAGE LIGHTBOX (self-contained, no external CSS dependency) ========== */
#v2PqImgLightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#v2PqImgLightbox .ntm-lightbox-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100% - 80px);
    padding: 40px 0;
}

#v2PqImgLightbox .ntm-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

#v2PqImgLightbox .ntm-lightbox-actions {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#v2PqImgLightbox .ntm-lightbox-close-btn {
    padding: 10px 20px;
    background: #fff;
    color: #3D3D3D;
    border: none;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

#v2PqImgLightbox .ntm-lightbox-close-btn:hover {
    background: #F5F5F5;
}

/* ========== MLRA READ-ONLY QUESTIONS ========== */

.v2-pq-mlra-readonly {
    pointer-events: none;
    position: relative;
    background: #FAFAFA;
}

.v2-pq-mlra-readonly .v2-pq-answer-card,
.v2-pq-mlra-readonly .v2-pq-textarea,
.v2-pq-mlra-readonly .v2-pq-text-input,
.v2-pq-mlra-readonly .v2-pq-score-input {
    cursor: not-allowed;
}

/* L1+ approvers can still create/view interim tasks on past-level readonly
   questions (mirrors old UI `todo_edit_eval_report_question.jsp` L3172 path).
   The parent wrap kills pointer-events for the readonly answer inputs, so we
   re-enable them on the interim-task affordances specifically. */
.v2-pq-mlra-readonly .v2-pq-create-task-wrap,
.v2-pq-mlra-readonly .v2-pq-create-task-btn,
.v2-pq-mlra-readonly .v2-pq-view-tasks-btn {
    pointer-events: auto;
}

/* Re-enable evidence thumbnail clicks so L1+ approvers can preview the
   image/doc/video L0 attached. Without this, `.v2-pq-mlra-readonly`'s
   `pointer-events: none` swallows the click before it reaches the
   thumb's lightbox handler. */
.v2-pq-mlra-readonly .v2-pq-ev-thumb,
.v2-pq-mlra-readonly .v2-pq-ev-more,
.v2-pq-mlra-readonly .v2-pq-ev-file-pill,
.v2-pq-mlra-readonly .v2-pq-evidence-row,
.v2-pq-mlra-readonly .v2-pq-ref-image {
    pointer-events: auto;
    cursor: pointer;
}

/* ========== MLRA ASSIGNEE MODAL ========== */

.v2-pq-mlra-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-pq-mlra-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6.1px 1px rgba(0, 0, 0, 0.11);
    width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 16px 24px 24px;
    min-height: 300px;
    justify-content: space-between;
}

.v2-pq-mlra-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.v2-pq-mlra-modal-title {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #1F1F1F;
    line-height: 28px;
}

/* Assign to field */
.v2-pq-mlra-field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.v2-pq-mlra-field-label {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5C5C5C;
    line-height: 20px;
}

.v2-pq-mlra-assign-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #D6D6D6;
    padding: 10px 0;
    background: #fff;
}

.v2-pq-mlra-field.has-error .v2-pq-mlra-assign-input-wrap {
    border-bottom-color: #E53E3E;
}

.v2-pq-mlra-field-error {
    display: none;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #E53E3E;
    line-height: 18px;
    padding-top: 6px;
}

.v2-pq-mlra-field-error.active {
    display: block;
}

.v2-pq-mlra-user-icon {
    flex-shrink: 0;
}

.v2-pq-mlra-assign-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 24px;
    background: transparent;
    min-width: 0;
    border: none !important;
}

.v2-pq-mlra-assign-input::placeholder {
    color: #ADADAD;
}

.v2-pq-mlra-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E5E5EA;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.v2-pq-mlra-suggestions a {
    display: block;
    padding: 10px 12px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #344054;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid #F2F4F7;
}

.v2-pq-mlra-suggestions a:hover {
    background: #F0F3FF;
    color: #4F66E4;
}

.v2-pq-mlra-suggestions a:last-child {
    border-bottom: none;
}

/* V2 suggestion row: avatar + name/meta */
.v2-pq-mlra-suggestion-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid #F2F4F7;
    background: #fff;
}
.v2-pq-mlra-suggestion-item:hover {
    background: #F5F7FF;
}
.v2-pq-mlra-suggestion-item:last-child {
    border-bottom: none;
}
.v2-pq-mlra-suggestion-item .v2-avatar {
    flex-shrink: 0;
}
.v2-pq-mlra-suggestion-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.v2-pq-mlra-suggestion-name {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1F1F1F;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v2-pq-mlra-suggestion-meta {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #5C5C5C;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline calendar — host for shared v2DatePicker (mounted via JS) */
.v2-pq-mlra-calendar {
    margin-top: 8px;
}

/* dueType == 3 (system-set sysDueDay offset) — readonly date display.
   Mirrors old UI's disabled+readonly input style. */
.v2-pq-mlra-due-readonly {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    background: #F5F5F5;
    color: #5C5C5C;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

/* Modal actions */
.v2-pq-mlra-modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.v2-pq-mlra-modal-btn {
    flex: 1;
    padding: 10px 18px;
    border-radius: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    text-align: center;
    border: none;
}

.v2-pq-mlra-modal-cancel {
    background: #fff;
    border: 1px solid #C2C2C2;
    color: #5C5C5C;
}

.v2-pq-mlra-modal-cancel:hover {
    background: #F5F5F5;
}

.v2-pq-mlra-modal-submit {
    background: #4F66E4;
    color: #fff;
}

.v2-pq-mlra-modal-submit:hover {
    background: #3D52C7;
}

/* ========== VIEW MODE (filled/read-only state) ========== */

/* Per-question readonly — lock non-editable questions in edit mode.
   Dim the whole question to signal "not editable" (Figma edit-flow spec).
   Two selectors so the dim works whether driven by JS-added class
   (.v2-pq-q-readonly) or by JSP-rendered data attribute (data-q-editable). */
.v2-pq-q-readonly,
.v2-pq-edit-mode .v2-pq-question[data-q-editable="false"] {
    opacity: 0.7 !important;
}

.v2-pq-q-readonly .v2-pq-answer-card,
.v2-pq-q-readonly .v2-pq-img-card,
.v2-pq-q-readonly .v2-pq-nps-item,
.v2-pq-q-readonly .v2-pq-rating-opt,
.v2-pq-q-readonly .v2-pq-rating-dd-trigger,
.v2-pq-q-readonly .v2-pq-query-field,
.v2-pq-q-readonly .v2-pq-sig-pad,
.v2-pq-q-readonly .v2-pq-stopwatch-btn {
    pointer-events: none;
    cursor: default;
}
.v2-pq-q-readonly .v2-pq-textarea,
.v2-pq-q-readonly .v2-pq-text-input,
.v2-pq-q-readonly .v2-pq-score-input,
.v2-pq-q-readonly .v2-pq-comment-input {
    pointer-events: none;
    background: #F9F9F9;
    color: #7A7A7A;
}
/* PS-2230: formula questions are locked (answer computed via Calculate) but
   the filler's comment stays editable — undo the lock for the comment only. */
.v2-pq-q-readonly.v2-pq-comment-editable {
    opacity: 1 !important;
}
.v2-pq-q-readonly.v2-pq-comment-editable .v2-pq-answer-area {
    opacity: 0.7;
}
.v2-pq-q-readonly.v2-pq-comment-editable .v2-pq-comment-input {
    pointer-events: auto;
    background: transparent;
    color: #3D3D3D;
}
.v2-pq-q-readonly .v2-pq-answer-card:hover {
    border-color: #D6D6D6;
    background: transparent;
}
.v2-pq-q-readonly .v2-pq-answer-card.v2-pq-selected:hover {
    border-color: #AFB9F2;
    background: #F0F2FD;
}

/* All answer cards — no hover effect, show filled state.
   View mode shows ALL options: the picked one keeps its selected (blue) style,
   the unselected ones render greyed out so the row reads as non-editable. */
.v2-pq-view-mode .v2-pq-answer-card {
    pointer-events: none;
    cursor: default;
}
.v2-pq-view-mode .v2-pq-answer-card:not(.v2-pq-selected) {
    background: #F9F9F9;
    border-color: #E5E5E5;
}
.v2-pq-view-mode .v2-pq-answer-card:not(.v2-pq-selected) .v2-pq-answer-text {
    color: #999999;
}
.v2-pq-view-mode .v2-pq-answer-card:not(.v2-pq-selected) .v2-pq-radio,
.v2-pq-view-mode .v2-pq-answer-card:not(.v2-pq-selected) .v2-pq-checkbox {
    border-color: #D6D6D6;
    background: transparent;
}
.v2-pq-view-mode .v2-pq-answer-card:hover {
    border-color: #E5E5E5;
    background: #F9F9F9;
}
.v2-pq-view-mode .v2-pq-answer-card.v2-pq-selected,
.v2-pq-view-mode .v2-pq-answer-card.v2-pq-selected:hover {
    border-color: #AFB9F2;
    background: #F0F2FD;
}

/* Image cards — image variants don't get a `.v2-pq-selected` class on initial
   render (they style via `:has(input:checked)`), so check both for the
   unselected dimming. */
.v2-pq-view-mode .v2-pq-img-card {
    pointer-events: none;
    cursor: default;
}
.v2-pq-view-mode .v2-pq-img-card:not(.v2-pq-selected):not(:has(input:checked)) {
    opacity: 0.5;
    filter: grayscale(0.4);
}

/* Text inputs and textareas — read-only but normal appearance */
.v2-pq-view-mode .v2-pq-textarea,
.v2-pq-view-mode .v2-pq-text-input,
.v2-pq-view-mode .v2-pq-score-input,
.v2-pq-view-mode .v2-pq-comment-input {
    cursor: default;
    resize: none;
}

/* NPS items */
.v2-pq-view-mode .v2-pq-nps-item {
    pointer-events: none;
    cursor: default;
}

/* Rating options — show ALL options in view mode; the selected one keeps its
   normal style, the unselected ones render greyed out (non-editable look). */
.v2-pq-view-mode .v2-pq-rating-opt {
    pointer-events: none;
    cursor: default;
}
.v2-pq-view-mode .v2-pq-rating-opt:not(.v2-pq-rating-opt-selected) .v2-pq-rating-opt-text {
    color: #999999;
}
.v2-pq-view-mode .v2-pq-rating-opt:not(.v2-pq-rating-opt-selected) .v2-pq-rating-radio {
    border-color: #D6D6D6;
}

/* Rating dropdowns — trigger already shows the selected label only; in view
   mode it gets the same disabled-input look as short answer (#F2F2F2 bg,
   greyed text). Higher specificity needed to beat the
   `.v2-pq-rating-dd-trigger:has(.v2-pq-dd-selected)` white-bg rule. */
.v2-pq-view-mode .v2-pq-rating-dd-trigger,
.v2-pq-view-mode .v2-pq-rating-dd-trigger:has(.v2-pq-rating-dd-text.v2-pq-dd-selected) {
    pointer-events: none;
    cursor: default;
    background: #F2F2F2;
    border-color: #E5E5E5;
}
.v2-pq-view-mode .v2-pq-rating-dd-text,
.v2-pq-view-mode .v2-pq-rating-dd-text.v2-pq-dd-selected {
    color: #999999;
}
.v2-pq-view-mode .v2-pq-rating-dd-chevron {
    display: none;
}

/* Query dropdowns */
.v2-pq-view-mode .v2-pq-query-field {
    pointer-events: none;
    cursor: default;
}

/* Signature — show preview, hide canvas interactions */
.v2-pq-view-mode .v2-pq-sig-pad {
    pointer-events: none;
}

/* Stopwatch — no interaction */
.v2-pq-view-mode .v2-pq-stopwatch-btn {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

/* Evidence — keep thumbs visible but hide upload trigger and delete */
.v2-pq-view-mode .v2-pq-ev-upload-area,
.v2-pq-view-mode .v2-pq-attach-section,
.v2-pq-view-mode .v2-pq-ev-delete-btn {
    display: none !important;
}

/* NA — hide in view mode */
.v2-pq-view-mode .v2-pq-na-wrap {
    display: none !important;
}

/* Section dropdown — keep functional for navigation */
.v2-pq-view-mode .v2-pq-section-pill {
    cursor: pointer;
    pointer-events: auto;
}

/* Hide individual question scores in view mode */
.v2-pq-view-mode .v2-pq-score-badge {
    display: none !important;
}

/* Hide section scores in view mode */
.v2-pq-view-mode .v2-pq-section-score {
    display: none !important;
}

/* ========== DETRACTOR PILL (Figma node 60:123482) ==========
   Pill rendered at the top of a detractor question when a detractor
   option is currently selected. */
.v2-pq-detractor-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FEF3F2;
    padding: 2px 12px 2px 8px;
    border-radius: 16px;
    align-self: flex-start;
    margin-bottom: 8px;
    mix-blend-mode: multiply;
}

.v2-pq-detractor-pill-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.v2-pq-detractor-pill-text {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #B42318;
    white-space: nowrap;
}

/* Red variant of the score badge (Figma node 60:123491) — applied to a
   detractor question when a detractor option is currently selected. */
.v2-pq-score-badge.v2-pq-score-badge--detractor {
    border-color: #DC1759;
}
.v2-pq-score-badge.v2-pq-score-badge--detractor .v2-pq-score-val {
    color: #DC1759;
}
.v2-pq-score-badge.v2-pq-score-badge--detractor .v2-pq-score-sep {
    background: #DC1759;
}

/* ==================== SUCCESS SCREEN (Figma 60:124600) ==================== */
.v2-pq-success-overlay {
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Header bar (Figma 60:124602) — org logo, sits at top of the overlay */
.v2-pq-success-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5EA;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.v2-pq-success-header-logo {
    display: flex;
    align-items: center;
    height: 40px;
}
.v2-pq-success-header-logo-img {
    height: 40px;
    width: auto;
    max-width: 252px;
    object-fit: contain;
    mix-blend-mode: darken;
    display: block;
}

.v2-pq-success-content {
    width: 460px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    margin-top: -200px;
}

.v2-pq-success-anim {
    width: 480px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    z-index: -1;
}

.v2-pq-success-anim svg {
    width: 100%;
    height: 100%;
    display: block;
}

.v2-pq-success-anim--fallback {
    background: #D1FADF;
    border: 23.333px solid #ECFDF3;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    box-sizing: border-box;
    position: relative;
}
.v2-pq-success-anim--fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #12B76A url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 50% no-repeat;
    border-radius: 50%;
}

.v2-pq-success-text-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    margin-top: -200px;
}

.v2-pq-success-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: #1F1F1F;
}

.v2-pq-success-sub {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #3D3D3D;
}

.v2-pq-success-procname {
    font-weight: 600;
}

.v2-pq-success-link {
    color: #2541DD;
    text-decoration: underline;
}
.v2-pq-success-link:hover,
.v2-pq-success-link:focus {
    color: #2541DD;
    text-decoration: underline;
}

/* Reference number row — mirrors old todo_v1 success popup layout
   (label on left, value on right, separators above + below). */
.v2-pq-success-ref {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid #E5E5EA;
    border-bottom: 1px solid #E5E5EA;
    margin-top: 4px;
}
.v2-pq-success-ref-label {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #6B7280;
}
.v2-pq-success-ref-value {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #1F1F1F;
}

.v2-pq-success-tag {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #3D3D3D;
}

.v2-pq-success-btn {
    position: relative;
    width: 349px;
    max-width: 100%;
    height: 44px;
    border: 1px solid #6C7FE8;
    border-radius: 4px;
    background: #6C7FE8;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
.v2-pq-success-btn:hover { filter: brightness(0.96); }
.v2-pq-success-btn:active { filter: brightness(0.92); }

.v2-pq-success-btn-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #4F66E4;
    border-radius: 4px 0 0 4px;
    pointer-events: none;
}

.v2-pq-success-btn-label {
    position: relative;
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    text-align: center;
}

/* ============================================================
   Preview mode (builder uses this to render the fill form
   without Submit / Edit / Close affordances; the slider chrome
   owns Close). Form is fully interactive — info icons, image
   lightbox, attachment upload, etc. all work — but the JS only
   persists state on Submit, which is hidden in preview, so any
   "answers" the user enters while exploring are discarded when
   the slider closes.
   ============================================================ */