/*
 * Shared choice inputs (ADR 0018). Two parts:
 *   1. The skills checklist: one clearly separated row per skill.
 *   2. The type-to-search box that replaces long single-answer dropdowns.
 * Colours come from the Bootstrap palette the site already uses (branding.md).
 */

/* ---------------------------------------------------------------- 1. Skills */

/* Ma'am Steph's report (19 Sep 2026): skills ran together and nothing marked
   where one ended. Each skill is now its own row with a divider, the whole row
   is the click target (the label fills it), and hover, keyboard focus and the
   ticked state each shade the whole row. The tick itself still carries the
   meaning, so colour is never the only signal. */
.pwde-skill-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0 0.5rem;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.pwde-skill-row:last-child {
    border-bottom: 0;
}

.pwde-skill-row .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.7rem 0 0;
    cursor: pointer;
}

.pwde-skill-row .form-check-label {
    flex: 1 1 auto;
    padding: 0.55rem 0;
    line-height: 1.35;
    cursor: pointer;
}

.pwde-skill-row:hover {
    background: #f1f8f4;
}

.pwde-skill-row:focus-within {
    background: #f1f8f4;
    outline: 2px solid #198754;
    outline-offset: -2px;
}

.pwde-skill-row.is-checked {
    background: #d1e7dd;
}

.pwde-skill-row.is-checked .form-check-label {
    font-weight: 600;
}

/* A list with a maximum (Target Disabilities: max 5) disables the rest once
   full; those rows are dimmed and lose the hover shade so they read as closed. */
.pwde-skill-row:has(.form-check-input:disabled) {
    opacity: 0.55;
    background: transparent;
}

.pwde-skill-row:has(.form-check-input:disabled) .form-check-label {
    cursor: not-allowed;
}

/* The menu used to take the width of a narrow column, so a name like
   "Spreadsheet Management (Excel, Google Sheets)" wrapped onto four lines.
   It may now grow wider than its button, never wider than the screen.
   Two classes on purpose: the sign-up page loads Bootstrap a second time AFTER
   this file, and Bootstrap's own `.dropdown-menu { min-width: 10rem }` would
   otherwise win on equal weight (found by the independent check, 2026-09-26). */
.dropdown-menu.pwde-skill-menu {
    min-width: min(22rem, calc(100vw - 2rem));
}

/* Group headings are real buttons now (keyboard and screen readers can open
   them); they keep the look of the old bold heading. */
.pwde-skill-group-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 0.75rem 0 0.25rem;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: #f8f9fa;
    text-align: left;
}

.pwde-skill-group-toggle:hover {
    background: #e9ecef;
}

.pwde-skill-group-toggle:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

/* The search box stays at the top of the scrolling list, labelled, so it is
   the first thing people see. The negative top offset cancels the list's own
   padding so the box sits flush while scrolling. */
.pwde-skill-search {
    position: sticky;
    top: -1rem;
    z-index: 2;
    margin: -1rem -1rem 0.5rem;
    padding: 1rem 1rem 0.5rem;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
}

.pwde-skill-search .form-label {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* ------------------------------------------------------- 2. Type-to-search */

/* The original <select> stays in the page, hidden, so its model, options,
   change handlers and validation keep working. It is clipped rather than
   display:none so the browser can still move focus to it, which the script
   hands straight to the text box. */
.pwde-tts-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pwde-tts {
    position: relative;
    width: 100%;
}

.input-group > .pwde-tts {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.pwde-tts-input.form-control {
    padding-right: 2.5rem;
}

.pwde-tts-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.25rem;
    border: 0;
    background: transparent;
    color: #495057;
    cursor: pointer;
}

/* A plain chevron drawn with borders, so no icon font is needed. */
.pwde-tts-toggle::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
}

.pwde-tts.is-open .pwde-tts-toggle::before {
    transform: translateY(25%) rotate(-135deg);
}

.pwde-tts-toggle:disabled {
    cursor: default;
    opacity: 0.5;
}

.pwde-tts-list {
    position: absolute;
    z-index: 1070;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 16rem;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Opened upward when there is more room above (the script sets .is-above and the
   height from the space it measured). */
.pwde-tts.is-above .pwde-tts-list,
.pwde-tts.is-above .pwde-tts-empty {
    top: auto;
    bottom: calc(100% + 2px);
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.pwde-tts-list[hidden],
.pwde-tts-empty[hidden],
.pwde-tts-note[hidden] {
    display: none;
}

.pwde-tts-option {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f3f5;
    line-height: 1.35;
    cursor: pointer;
}

.pwde-tts-option:last-child {
    border-bottom: 0;
}

.pwde-tts-option:hover {
    background: #f1f8f4;
}

/* The highlighted suggestion (arrow keys) gets a filled background AND a left
   bar, so it does not depend on colour alone. */
.pwde-tts-option.is-active {
    background: #cfe2ff;
    box-shadow: inset 4px 0 0 #0d6efd;
}

.pwde-tts-option:focus {
    outline: 3px solid #0d6efd;
    outline-offset: -3px;
    background: #cfe2ff;
}

.pwde-tts-option[aria-selected="true"]::after {
    content: " (current choice)";
    color: #495057;
    font-size: 0.875em;
}

.pwde-tts-option mark {
    padding: 0;
    background: transparent;
    font-weight: 700;
    color: inherit;
}

.pwde-tts-empty {
    position: absolute;
    z-index: 1070;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    color: #495057;
}

.pwde-tts-note {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #b02a37;
}

.pwde-tts-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Chosen-skill chips under a narrow column. Bootstrap's .badge never wraps (white-space: nowrap),
   so a long name such as "Spreadsheet Software (Excel, Google Sheets)" ran under the Description
   box beside it on applicant sign-up (QA, staging, 26 Sep 2026). Let the chip wrap inside its column. */
.pwde-skill-chips .badge {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    text-align: start;
}