/* ============================================================================
   JAT survey-taking screens — Figma Survey01-09 (325:7495 … 325:9240).

   These are the pages a respondent sees: survey_url.php and its preview. They
   are NOT part of the admin/client shell, so nothing here is scoped under
   .jat-shell — the scope is `.jat-survey` on <body>.

   Every value comes from css/jat-figma-tokens.css. A few component rules
   (buttons, fields, radios) restate what jat-components.css already says for the
   shell: the selectors there are all scoped `.jat-shell`, and re-scoping ~900
   lines of working CSS to reach a second context would risk 62 converted pages
   for no behaviour gain. The DECLARATIONS are token references either way, so
   there is one place to change a value even though there are two selectors.

   Colours confirmed against the frame's own variables (325:8077): Green
   #AFBC21, Mint Green #76C38B, Black #2B2C30, Gray #C9CACC, Grays/Gray #8E8E93,
   Dark Gray #6F7074, White.

   Requires: css/jat-figma-tokens.css.
   ============================================================================ */

/* --- Page shell: white rail on the left, tinted work area on the right ----- */
.jat-survey {
    margin: 0;
    background: var(--jat-bg);
    font-family: var(--jat-font);
    color: var(--jat-black);
    font-size: var(--jat-fs-body);
    line-height: var(--jat-lh-body);
}

.jat-survey-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.jat-survey-rail {
    flex: 0 0 24%;
    max-width: 460px;
    background: var(--jat-white);
    padding: 56px 40px;
    box-sizing: border-box;
}
.jat-survey-rail img { max-width: 200px; height: auto; display: block; }

/* The lime standfirst under the logo. */
.jat-survey-kicker {
    color: var(--jat-green);
    font-size: var(--jat-fs-body);
    font-weight: 700;
    line-height: var(--jat-lh-heading);
    text-transform: uppercase;
    margin: 20px 0 0;
}

.jat-survey-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 48px 40px 64px;
    box-sizing: border-box;
}

/* The design centres one column of cards in the work area. */
.jat-survey-main .content,
.jat-survey-body { max-width: 1100px; margin: 0 auto; }

/* --- Card ----------------------------------------------------------------- */
/* The survey markup reuses the legacy `.widget` block for each step and each
   question page, so the card treatment attaches to that rather than needing new
   wrappers in the generated HTML. */
/* ⚠️ SPECIFICITY — measured in the browser, not guessed (cdp-eval.ps1 walking
   document.styleSheets for rules matching the element).

   css/jat-forms.css is a whole competing form-card layer, and the survey form is
   a `.mainForm`, so it applies here: `.mainForm .fluid .widget` (0,3,0) sets
   `padding: 0; width: 95%; border-radius: 0 10px 10px 10px` and beat a plain
   `body.jat-survey .widget` (0,2,1) — three classes outrank two. Naming `.fluid`
   as well takes this to (0,3,1), which wins on specificity rather than on the
   accident of load order.

   Do not "simplify" these selectors back down. */
body.jat-survey .widget,
body.jat-survey .fluid .widget {
    background: var(--jat-white);
    border: 0;
    border-radius: 16px;
    box-shadow: var(--jat-shadow);
    padding: 32px;
    margin-bottom: var(--jat-card-gap);
}
/* The legacy step markup rules off each row with .border_top / .border_bottom;
   the design separates them with whitespace alone. */
body.jat-survey .widget .rowElem,
body.jat-survey .fluid .widget .rowElem,
body.jat-survey .widget fieldset { border: 0; }

/* Card header: logo chip, title, progress. The legacy `.head` is a grey strip
   with a hairline; the design has neither. */
body.jat-survey .widget > .head,
body.jat-survey .widget .head,
body.jat-survey .fluid .widget .head {
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--jat-gray);
    min-height: 0;
    padding: 0 0 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
body.jat-survey .widget .head h5,
body.jat-survey .fluid .widget .head h5,
body.jat-survey .widget .head .iList {
    font-size: var(--jat-fs-h4);
    font-weight: 700;
    line-height: var(--jat-lh-heading);
    color: var(--jat-black);
    margin: 0;
    padding: 0;
    float: none;
    background-image: none;
}

/* Client logo beside the title, as a bordered chip. The element carries
   `style="display:none;max-width:300px"` inline — an inline declaration can only
   be answered with !important, which is why both appear here. */
.jat-survey #logo_block {
    display: block !important;
    max-width: 116px !important;
    border: 1px solid var(--jat-gray);
    border-radius: var(--jat-radius);
    padding: 8px;
    margin: 0 0 20px;
    box-sizing: border-box;
}
.jat-survey #logo_block img { display: block; max-width: 100%; height: auto; }

/* --- Progress ------------------------------------------------------------- */
/* survey_url.view.php carries an inline <style> that floats `.upper_progress`
   right with a 15px gradient bar. These selectors lead with .jat-survey so they
   out-rank it (0,2,0 vs 0,1,0) without that block needing to be edited. */
.jat-survey .progrss_div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
}
.jat-survey .upper_progress {
    flex: 1 1 auto;
    order: 1;
    float: none;
    width: auto;
    height: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--jat-light-3);
    background-image: none;
    filter: none;
    overflow: hidden;
}
.jat-survey #progress_bar,
.jat-survey .task_progressbar {
    height: 100%;
    background: var(--jat-mint);
    background-image: none;
    border-radius: 999px;
    transition: width .25s ease;
}
/* The percentage reads to the RIGHT of the bar in the design; the markup emits
   it first, so it is ordered rather than moved. */
.jat-survey .progress_lbl {
    order: 2;
    flex: 0 0 auto;
    color: var(--jat-mint);
    font-size: var(--jat-fs-small);
    font-weight: 600;
    margin: 0;
    padding: 0;
    float: none;
    min-width: 3.5em;
}

/* --- Questions ------------------------------------------------------------ */
/* Each question is a table row in the generated markup (Sr No | Question). The
   design stacks number + text on one line, then the options, then the comment —
   so the table is re-flowed as blocks rather than rebuilt in ajax.php, which
   also generates the answer inputs the scoring logic depends on. */
.jat-survey .questionList table.tableStatic,
.jat-survey .questionList table.tableStatic > tbody,
.jat-survey .questionList table.tableStatic > tbody > tr,
.jat-survey .questionList table.tableStatic > tbody > tr > td {
    display: block;
    width: auto !important;
    border: 0;
    padding: 0;
    background: transparent;
}
.jat-survey .questionList table.tableStatic > tbody > tr {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 0 28px;
}
/* The column-header row ("Sr No / Question") has no counterpart in the design. */
.jat-survey .questionList table.tableStatic > tbody > tr:first-child:has(b) { display: none; }

.jat-survey .questionList td center { text-align: left; }
/* The design numbers questions "7." — the markup emits the digit alone. */
.jat-survey .questionList td:first-child center::after { content: "."; }

.jat-survey .question_block {
    font-size: var(--jat-fs-body);
    line-height: var(--jat-lh-body);
    color: var(--jat-black);
    width: auto !important;
    float: none;
    margin: 0 0 14px;
}

/* Question row: text, then options, then comment — one column. */
.jat-survey .questionList .rowElem {
    display: block;
    width: auto !important;
    border: 0;
    padding: 0;
}
.jat-survey .answer_block {
    width: auto !important;
    float: none;
    margin: 0;
}

/* --- Rating scale (the four agree/disagree options) ----------------------- */
.jat-survey .que_ans_block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    float: none;
}
.jat-survey .answer_block {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 16px;
    align-items: center;
}
/* The comment field spans the whole option row beneath it. */
.jat-survey .answer_block > input[type="text"] { grid-column: 1 / -1; }

.jat-survey .que_ans_block input[type="radio"] {
    width: 20px; height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--jat-dark-1);
}
.jat-survey .radioLable,
.jat-survey .que_ans_block label {
    font-size: var(--jat-fs-body);
    font-weight: 400;
    color: var(--jat-black);
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
    cursor: pointer;
    line-height: var(--jat-lh-body);
}

/* --- Fields --------------------------------------------------------------- */
.jat-survey input[type="text"],
.jat-survey input[type="email"],
.jat-survey input[type="number"],
.jat-survey input[type="password"],
.jat-survey textarea,
.jat-survey select {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--jat-font);
    font-size: var(--jat-fs-body);
    color: var(--jat-dark-1);
    background: var(--jat-white);
    border: 1px solid var(--jat-field-border);
    border-radius: var(--jat-radius);
    padding: 12px 16px;
    line-height: var(--jat-lh-body);
    box-shadow: none;
}
.jat-survey textarea { min-height: 120px; resize: vertical; }
.jat-survey input:focus,
.jat-survey select:focus,
.jat-survey textarea:focus { border-color: var(--jat-dark-1); outline: none; }
.jat-survey input:focus-visible,
.jat-survey select:focus-visible,
.jat-survey textarea:focus-visible,
.jat-survey a:focus-visible,
.jat-survey button:focus-visible {
    outline: 2px solid var(--jat-black);
    outline-offset: 2px;
}
.jat-survey input::placeholder,
.jat-survey textarea::placeholder { color: var(--jat-gray-mid); }
.jat-survey input:disabled,
.jat-survey select:disabled,
.jat-survey textarea:disabled {
    background: var(--jat-light-3);
    color: var(--jat-gray-dark);
    cursor: not-allowed;
}

.jat-survey .mainForm label,
.jat-survey label {
    display: block;
    float: none;
    width: auto;
    font-size: var(--jat-fs-body);
    font-weight: 600;
    color: var(--jat-black);
    line-height: var(--jat-lh-heading);
    margin: 0 0 8px;
    padding: 0;
}
.jat-survey .req { color: var(--jat-danger-text); margin-left: 2px; }

/* Steps before the questions are single fields in a card, full width. */
.jat-survey .rowElem {
    display: block;
    width: auto !important;
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}
.jat-survey .rowElem .span3,
.jat-survey .rowElem .span5,
.jat-survey .rowElem .span6 { width: auto !important; float: none; margin: 0; }

/* select2 / Uniform skins used on these steps. */
.jat-survey .select2-container { width: 100% !important; }
.jat-survey .select2-container .select2-choice {
    height: auto;
    padding: 12px 16px;
    border: 1px solid var(--jat-field-border);
    border-radius: var(--jat-radius);
    background: var(--jat-white);
    background-image: none;
    box-shadow: none;
    color: var(--jat-dark-1);
    font-size: var(--jat-fs-body);
    line-height: var(--jat-lh-body);
}

/* --- Buttons -------------------------------------------------------------- */
/* Same scale as the rest of the system (style guide §04, Extra Small default);
   the survey's Back/Next pair sits bottom-right, outside the card. */
.jat-survey .redBtn,
.jat-survey .kLimeBtn,
.jat-survey .greenBtn,
.jat-survey .blueBtn,
.jat-survey .blackBtn,
.jat-survey .greyishBtn,
.jat-survey .btnCancel,
.jat-survey input[type="submit"],
.jat-survey input[type="button"] {
    padding: var(--jat-btn-py) var(--jat-btn-px);
    font-family: var(--jat-font);
    font-size: var(--jat-btn-fs);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--jat-radius);
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    filter: none;
}
.jat-survey .redBtn,
.jat-survey .kLimeBtn,
.jat-survey .greenBtn,
.jat-survey input[type="submit"] {
    /* Dark on lime for the same 2.09:1-vs-6.67:1 reason documented in
       jat-components.css — the design's white label does not meet AA. */
    background: var(--jat-green);
    border: 1px solid var(--jat-green);
    color: var(--jat-black);
}
.jat-survey .redBtn:hover,
.jat-survey .kLimeBtn:hover,
.jat-survey .greenBtn:hover,
.jat-survey input[type="submit"]:hover { background: #9caa1c; border-color: #9caa1c; }

.jat-survey .blueBtn,
.jat-survey .blackBtn,
.jat-survey .greyishBtn,
.jat-survey .btnCancel,
.jat-survey input[type="button"] {
    background: var(--jat-black);
    border: 1px solid var(--jat-black);
    color: var(--jat-white);
}
.jat-survey .blueBtn:hover,
.jat-survey .blackBtn:hover,
.jat-survey .greyishBtn:hover,
.jat-survey .btnCancel:hover,
.jat-survey input[type="button"]:hover { background: #3a3b40; border-color: #3a3b40; }

/* The action row the design puts under the card, right-aligned. */
.jat-survey .jat-survey-actions,
.jat-survey .btns {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    width: auto !important;
    float: none;
}

/* --- Messages ------------------------------------------------------------- */
.jat-survey .nNote {
    border-radius: var(--jat-radius);
    border-width: 1px;
    margin-bottom: var(--jat-card-gap);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
    .jat-survey-shell { flex-direction: column; }
    .jat-survey-rail {
        flex: 0 0 auto;
        max-width: none;
        padding: 24px 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        border-bottom: 1px solid #ececed;
    }
    .jat-survey-rail img { max-width: 120px; }
    .jat-survey-kicker { margin: 0; font-size: var(--jat-fs-small); }
    .jat-survey-main { padding: 24px 20px 48px; }
    .jat-survey .widget { padding: 20px; }
    /* Four options no longer fit a phone row; two up, then the comment. */
    .jat-survey .answer_block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .jat-survey .answer_block { grid-template-columns: 1fr; }
    .jat-survey .questionList table.tableStatic > tbody > tr { padding-bottom: 20px; }
}