/*
 * OIE package — responsive.css: the phone layer (UX-5).
 *
 * Linked in the head of every vendor layout by the metas shadow (fence
 * responsive-css, right after tokens.css) — BEFORE the vendor CSS, so a rule
 * that must beat a vendor rule wins by specificity (the doubled class,
 * .oie-table-cards.oie-table-cards), never by order and never by !important
 * (a [hidden] reset is the one exception).
 *
 * House rules, pinned by Storefront\ResponsiveCssTest: every selector starts
 * with an .oie- class (a vendor class only under an .oie- ancestor); colours
 * only from the UX-2 tokens (var(--oie-*)); logical properties only (no
 * left/right); the focus ring is never suppressed; nothing matches inside
 * .oie-quiz* (UX-7).
 *
 * Each UX-5 task appends ONE commented section at the end of this file.
 */

/* ---- Task 1 (UX-5, R3-08, R4-24): phone tables become cards ------------------
 *
 * The contract (Portal\PortalTableCardsTest pins the markup):
 *   <div class="table-responsive-lg oie-table-cards">
 *     <table class="table panel-table"> … <tbody><tr>
 *       <td class="… oie-table-cards__title">   the card heading (spans the card)
 *       <td … data-label="{{ __('…col_…') }}">   a label | value row
 *       <td class="… oie-table-cards__status" data-label="…">  the status hook
 *       <td class="… oie-table-cards__action">  the row's primary action (full width)
 *       <td class="… oie-table-cards__index">   a "#" row number (hidden on cards)
 *
 * Below 576 px the table, its body, rows and cells are blocks; the header row
 * is visually hidden (still read by screen readers); each row is a card and
 * each labelled cell a two-column grid whose ::before prints the column name
 * (the value column is minmax(0, 1fr) so its content never widens the card).
 * Source order is kept (no `order`). At 576 px and up nothing changes.
 *
 * The vendor cells carry .text-center / .text-left with !important; a value
 * therefore sits at the start of its grid column through justify-items, the
 * label through its own grid cell. The label spans every row of the grid so
 * a cell holding several elements stacks them all in the value column. */
@media (max-width: 575.98px) {
    .oie-table-cards.oie-table-cards {
        overflow-x: visible;
    }

    .oie-table-cards.oie-table-cards table,
    .oie-table-cards.oie-table-cards tbody,
    .oie-table-cards.oie-table-cards tr,
    .oie-table-cards.oie-table-cards td {
        display: block;
    }

    .oie-table-cards.oie-table-cards table {
        margin-block-end: 0;
    }

    /* The .oie-visually-hidden technique (tokens.css section 5), direction-neutral. */
    .oie-table-cards.oie-table-cards thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap; border: 0;
    }

    .oie-table-cards.oie-table-cards tbody > tr {
        background: var(--oie-card);
        border: 1px solid var(--oie-line);
        border-radius: var(--oie-radius-lg);
        padding: var(--oie-space-4);
        margin-block-end: var(--oie-space-3);
    }

    /* Long unbreakable values (an email, a URL) wrap inside the card instead of
     * pushing it past the screen edge (fix round 1, review I1). */
    .oie-table-cards.oie-table-cards tbody > tr > td {
        padding: var(--oie-space-2) 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .oie-table-cards.oie-table-cards td[data-label] {
        display: grid;
        grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
        column-gap: var(--oie-space-3);
        row-gap: 0;
        align-items: baseline;
        justify-items: start;
        text-align: start;
    }

    .oie-table-cards.oie-table-cards td[data-label]::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1 / span 20;
        color: var(--oie-muted);
        font-size: var(--oie-text-13);
    }

    .oie-table-cards.oie-table-cards .oie-table-cards__title {
        font-weight: 700;
        padding-block-start: 0;
    }

    /* A REFERENCE never breaks: the reference link (tna, proposals, partner lists) or
     * the reference line under a course title (dashboard, completed). An email or a
     * name in a title (the certificates tab's employee) is nested deeper and wraps. */
    .oie-table-cards.oie-table-cards .oie-table-cards__title > a bdi,
    .oie-table-cards.oie-table-cards .oie-table-cards__title > span > bdi {
        white-space: nowrap;
    }

    .oie-table-cards.oie-table-cards .oie-table-cards__index {
        display: none;
    }

    .oie-table-cards.oie-table-cards .oie-table-cards__action {
        padding-block: var(--oie-space-3) 0;
    }

    .oie-table-cards.oie-table-cards .oie-table-cards__action .btn,
    .oie-table-cards.oie-table-cards .oie-table-cards__action .oie-btn {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Task 2 (UX-5, R3-05, R3-04, R3-06): Waiting for you, the decision bar, OIE's question ----
 *
 * Plain rules (every width) for the three new panels, then one phone query.
 *   .oie-waiting       the client home's first panel: a card, one row per item
 *                      (label + reference + validity at the start, the button at
 *                      the end), the empty line in the muted colour.
 *   .oie-decision-bar  a sent proposal's decision, under the page header. Below
 *                      768 px it is FIXED to the bottom of the screen, not
 *                      sticky: the bar sits at the top of the page in source, and
 *                      a sticky bottom offset never holds an element whose own
 *                      place is above the viewport — it would scroll away with
 *                      the header. Fixed keeps "Respond" one tap away while the
 *                      client reads the document; the spacer after the trail
 *                      gives the page the bar's height back. It sits above the
 *                      page (z-index 20) and leaves the assistant launcher's
 *                      corner free (the launcher is 48 px at 12 px from the
 *                      inline end, assistant.css). "Read the full proposal"
 *                      hides there and "Respond" fills the bar.
 *                      An expired bar (--expired) offers no action, so it stays
 *                      in the page flow on a phone and its Read link stays
 *                      (fix round 1, review Minor 3).
 *   .oie-callout       OIE's open question on a training request. */
.oie-waiting,
.oie-decision-bar,
.oie-callout {
    background: var(--oie-card);
    border-radius: var(--oie-radius-lg);
    padding: var(--oie-space-4);
    color: var(--oie-ink);
}

.oie-waiting__none,
.oie-waiting__meta,
.oie-callout__meta,
.oie-decision-bar__meta {
    color: var(--oie-muted);
}

.oie-waiting__list {
    list-style: none;
    margin: var(--oie-space-3) 0 0;
    padding: 0;
}

.oie-waiting__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--oie-space-3);
    padding-block: var(--oie-space-3);
    border-block-start: 1px solid var(--oie-line);
}

.oie-waiting__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--oie-space-1) var(--oie-space-3);
    min-width: 0;
}

.oie-decision-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--oie-space-3);
    border: 1px solid var(--oie-gold-strong);
    /* The assistant launcher's phone size (assistant.css: 48px wide, 12px from the
     * inline end) — named here so the bar's reserved corner tracks one value. */
    --oie-launcher-size: 48px;
}

.oie-decision-bar__facts,
.oie-decision-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oie-space-2) var(--oie-space-4);
}

.oie-decision-bar__note {
    color: var(--oie-danger);
}

.oie-decision-bar__spacer {
    display: none;
}

.oie-callout {
    border: 1px solid var(--oie-gold-strong);
    border-inline-start-width: 4px;
    background: var(--oie-gold-tint);
}

@media (max-width: 767.98px) {
    .oie-waiting__item .oie-btn {
        min-height: 44px;
    }

    .oie-decision-bar.oie-decision-bar {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 20;
        margin: 0;
        border-radius: var(--oie-radius-lg) var(--oie-radius-lg) 0 0;
        padding: var(--oie-space-3) var(--oie-space-4);
        padding-inline-end: calc(var(--oie-launcher-size) + var(--oie-space-3) * 2);
    }

    .oie-decision-bar.oie-decision-bar.oie-decision-bar--expired {
        position: static;
        margin-block-start: var(--oie-space-4);
        border-radius: var(--oie-radius-lg);
        padding: var(--oie-space-4);
    }

    .oie-decision-bar.oie-decision-bar.oie-decision-bar--expired .oie-decision-bar__read {
        display: inline;
    }

    .oie-decision-bar.oie-decision-bar .oie-decision-bar__read {
        display: none;
    }

    .oie-decision-bar.oie-decision-bar .oie-decision-bar__actions {
        flex: 1 1 100%;
    }

    .oie-decision-bar.oie-decision-bar .oie-decision-bar__respond {
        flex: 1 1 auto;
        min-height: 44px;
    }

    .oie-decision-bar__spacer.oie-decision-bar__spacer {
        display: block;
        height: 160px;
    }
}

/* ---- Task 3 (UX-5, R3-15): the Team Reports custom-range group and the
   "Earlier records" disclosure. The custom dates sit in one inline group
   that the period select shows and hides; the [hidden] reset must beat the
   group's own display. */
.oie-period-custom {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oie-space-2);
}

.oie-period-custom[hidden] {
    display: none !important;
}

.oie-details > summary {
    cursor: pointer;
    min-height: 44px;
    padding-block: var(--oie-space-2);
}

/* ---- Task 4 (UX-5, R3-12): the client training-request form. The totals
   panel's layout lives here rather than in Bootstrap's d-flex (an
   !important display that beat the hidden attribute), so `hidden` hides
   it; the nominations are a scrollable checkbox list; the date inputs may
   shrink inside a phone's half-width column instead of clipping
   "mm/dd/yy". */
.oie-tna-totals:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--oie-space-2);
    margin-block-start: var(--oie-space-4);
    padding: var(--oie-space-4);
    border-radius: var(--oie-radius-lg);
    background: var(--oie-surface);
}

.oie-tna-nominees {
    min-width: 0;
    margin: 0;
    border: 0;
}

.oie-tna-nominees__list {
    max-block-size: 220px;
    overflow-y: auto;
    padding: var(--oie-space-1) var(--oie-space-3);
    border: 1px solid var(--oie-line);
    border-radius: var(--oie-radius-md);
    background: var(--oie-card);
}

.oie-tna-nominees__item:not([hidden]) {
    display: flex;
    align-items: center;
    gap: var(--oie-space-2);
    min-height: 32px;
    margin: 0;
    cursor: pointer;
}

.oie-tna-form input[type="date"] {
    min-width: 0;
    inline-size: 100%;
}

@media (max-width: 1279.98px) {
    .oie-tna-nominees__item:not([hidden]) {
        min-height: 44px;
    }
}

/* ---- Task 5 (UX-5, R3-19, R3-22): the partner's Submit Proposal client
   pair and the bulk-enrolment file control. The client fieldset sits inside
   the form's own fieldset, so it drops the browser's border and its legend
   carries the required mark the vendor gives a .form-group label. The
   enrolment file input is visually hidden; its label is the ghost button,
   and that button shows the focus ring while the input has focus. */
.oie-client-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.oie-client-choice > legend.is-required::after {
    content: " *";
    color: var(--oie-danger);
}

.oie-file-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--oie-space-3);
}

.oie-file-pick__button {
    margin: 0;
    cursor: pointer;
}

.oie-file-pick__input:focus-visible + .oie-file-pick__button {
    outline: 2px solid var(--oie-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--oie-focus-halo);
}

.oie-file-pick__name {
    overflow-wrap: anywhere;
}

/* ---- Task 6 (UX-5, R3-18): the partner dashboard's four tiles are a 2x2
 * grid on a phone, not four stacked cards. The tile columns carry no vendor
 * margin utility (a .mt-16 on the right-hand pair staggered the grid); the
 * stacked spacing between 576 and 767 px comes from this file. The row's
 * Bootstrap negative margins are reset and the cells stretch to one height
 * per row. */
@media (max-width: 767.98px) {
    .oie-tiles-2x2 > [class*="col-"] + [class*="col-"] {
        margin-block-start: var(--oie-space-4);
    }
}

@media (max-width: 575.98px) {
    .oie-tiles-2x2.oie-tiles-2x2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        align-items: stretch;
        gap: var(--oie-space-3);
        margin-inline: 0;
    }

    .oie-tiles-2x2.oie-tiles-2x2 > [class*="col-"] {
        width: auto;
        max-width: none;
        margin-block-start: 0;
        padding-inline: 0;
    }

    .oie-tiles-2x2.oie-tiles-2x2 > [class*="col-"] > div {
        height: 100%;
    }
}

/* ---- Task 8 (UX-5, R4-12, R4-13): the learner dashboard's "Next up" card and
 * the two-line clamp.
 *   .oie-clamp-2   a title that wraps to at most two lines (the vendor cut it
 *                  to 22-30 characters with "…"); the full title rides in
 *                  title=. A long unbroken word breaks rather than overflow.
 *   .oie-next-up   the card first on /panel: a heading, then its blocks (next
 *                  session, Continue, programme, certificate) — one column on
 *                  a phone, side by side from 992 px. */
.oie-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.oie-next-up {
    background: var(--oie-card);
    border-radius: var(--oie-radius-lg);
    padding: var(--oie-space-4);
    margin-block-end: var(--oie-space-5);
    color: var(--oie-ink);
}

.oie-next-up__title {
    font-size: var(--oie-text-18);
    font-weight: 700;
    margin: 0;
}

.oie-next-up__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oie-space-4);
    margin-block-start: var(--oie-space-3);
}

.oie-next-up__block {
    min-width: 0;
    padding-block-start: var(--oie-space-3);
    border-block-start: 1px solid var(--oie-line);
}

.oie-next-up__block p {
    margin: var(--oie-space-1) 0 0;
}

.oie-next-up__heading {
    font-size: var(--oie-text-14);
    font-weight: 700;
    color: var(--oie-muted);
    margin: 0;
}

.oie-next-up__name {
    font-size: var(--oie-text-16);
    font-weight: 700;
}

.oie-next-up__muted {
    color: var(--oie-muted);
    font-size: var(--oie-text-13);
}

.oie-next-up__where bdi {
    margin-inline-start: var(--oie-space-2);
}

.oie-next-up__block .oie-btn {
    margin-block-start: var(--oie-space-3);
}

.oie-next-up__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oie-next-up__course + .oie-next-up__course {
    margin-block-start: var(--oie-space-4);
}

.oie-next-up__progress {
    display: flex;
    align-items: center;
    gap: var(--oie-space-2);
    margin-block-start: var(--oie-space-2);
}

.oie-next-up__bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: var(--oie-radius-pill);
    background: var(--oie-grey-bg);
    overflow: hidden;
}

.oie-next-up__fill {
    display: block;
    height: 100%;
    background: var(--oie-btn-bg);
}

.oie-next-up__percent {
    font-size: var(--oie-text-13);
    font-weight: 700;
}

@media (min-width: 992px) {
    .oie-next-up__grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* ---- Task 8 fix round 1 (B8-1): the panel header row at 390 px. With the bell
 * shown on phones the row overflowed and clipped the account chevron. The
 * header shadow tightens the vendor spacing utilities below 992 px (they are
 * !important, so that change is in the class lists); here the account
 * trigger's chevron — decoration beside the avatar, which stays the named
 * button — is dropped on the narrowest phones. Fix round 2: by its own hook,
 * oie-account-chevron (header/auth_user_info shadow) — the notification bell
 * is an oie-menu-trigger too, and a `.oie-menu-trigger > .icons` selector
 * blanked its icon. */
@media (max-width: 419.98px) {
    .oie-panel-header .oie-account-chevron {
        display: none;
    }
}

/* ---- Task 9 (UX-5, R4-19, R4-25, R4-31, R4-13): the learning page sidebar's
 * Certificates tab, the course page's "Continue learning" and two-line title,
 * and My Programme's rows on a phone.
 *   .oie-cert-tab          learning/certificate-tab — the module certificate
 *                          OIE issued (number, date, View certificate, My
 *                          certificates) or the one pending sentence.
 *   .oie-course-continue   the course hero's "Continue learning" (hero
 *                          shadow, continue-learning fence) on its own line
 *                          under the title, so it is on the first screen.
 *   .oie-clamp-2.course-hero__title  the vendor gives the hero title a fixed
 *                          40px height (show_course.min.css), which would
 *                          clip the second line; doubled class beats it.
 *   .oie-programme-row     below 576 px each module row stacks its title over
 *                          its status and action (the # cell is hidden; the
 *                          header row is visually hidden, still read). The
 *                          vendor's .panel-table td / .table td rules are
 *                          (0,1,1), so these are (0,2,1). */
.oie-cert-tab {
    background: var(--oie-grey-bg);
    border-radius: var(--oie-radius-lg);
    padding: var(--oie-space-4);
    color: var(--oie-ink);
}

.oie-cert-tab__title {
    font-size: var(--oie-text-14);
    font-weight: 700;
    margin: 0 0 var(--oie-space-2);
}

.oie-cert-tab__line {
    font-size: var(--oie-text-13);
    margin: 0 0 var(--oie-space-1);
}

.oie-cert-tab__label {
    color: var(--oie-muted);
    margin-inline-end: var(--oie-space-1);
}

.oie-cert-tab__serial {
    font-weight: 700;
}

.oie-cert-tab__muted {
    color: var(--oie-muted);
}

.oie-cert-tab__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oie-space-3);
    margin-block-start: var(--oie-space-3);
}

.oie-course-continue {
    flex-basis: 100%;
}

.oie-clamp-2.course-hero__title {
    height: auto;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .oie-programme-table.oie-programme-table,
    .oie-programme-table.oie-programme-table tbody {
        display: block;
    }

    .oie-programme-table.oie-programme-table thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap; border: 0;
    }

    .oie-programme-row.oie-programme-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--oie-space-3);
        padding: var(--oie-space-3) var(--oie-space-4);
        border-block-start: 1px solid var(--oie-line);
    }

    .oie-programme-row.oie-programme-row > td {
        display: block;
        padding: 0;
        border: 0;
    }

    .oie-programme-row.oie-programme-row > .oie-programme-row__index {
        display: none;
    }

    .oie-programme-row.oie-programme-row > .oie-programme-row__title {
        grid-column: 1 / -1;
        padding-block-end: var(--oie-space-2);
    }
}

/* ---- Task 10 (UX-5, R4-14, R4-15, R4-16): the trainer's pages on a phone ----
 *
 *   .oie-trainer-primary-qr  the class page's full-width "Show check-in QR —
 *                            session, time" (an .oie-btn) above the sessions;
 *                            its one inner span wraps as running text.
 *   .oie-roll                "Checked in now" on the trainer's QR page
 *                            (trainer/partials/checked-in, inside the shared
 *                            QR sheet, whose own styles centre the text — the
 *                            roll reads from the start edge). Each item: the
 *                            name, the Present/Late badge, the time; the
 *                            not-yet names in a closed <details>.
 * The classes and sessions tables use Task 1's oie-table-cards contract. */
.oie-trainer-primary-qr.oie-btn {
    display: flex;
    width: 100%;
    text-align: center;
}

.oie-roll {
    margin-block-start: var(--oie-space-5);
    margin-inline: auto;
    max-width: 640px;
    padding: var(--oie-space-4);
    border: 1px solid var(--oie-line);
    border-radius: var(--oie-radius-lg);
    background: var(--oie-card);
    color: var(--oie-ink);
    text-align: start;
}

.oie-roll__title {
    margin: 0;
    font-size: var(--oie-text-18);
    font-weight: 700;
}

.oie-roll__count {
    margin: var(--oie-space-1) 0 0;
    font-size: var(--oie-text-14);
    font-weight: 600;
}

.oie-roll__none {
    margin: var(--oie-space-3) 0 0;
    font-size: var(--oie-text-14);
    color: var(--oie-muted);
}

.oie-roll__list {
    margin: var(--oie-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.oie-roll__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oie-space-2);
    padding-block: var(--oie-space-2);
    border-block-start: 1px solid var(--oie-line);
    font-size: var(--oie-text-14);
}

.oie-roll__name {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.oie-roll__time {
    color: var(--oie-muted);
    font-size: var(--oie-text-13);
}

.oie-roll__missing {
    margin-block-start: var(--oie-space-4);
}

.oie-roll__missing > summary {
    padding-block: var(--oie-space-3);
    cursor: pointer;
    font-size: var(--oie-text-14);
    font-weight: 600;
}

.oie-roll [hidden] {
    display: none !important;
}

/* ---- Task 11 (UX-5, R5-09, R5-15): the register form and the desktop header ----
   The register card's form container no longer scrolls inside itself: the
   vendor's .auth-page-form-container (parts/auth/theme_1.min.css) fixes
   height: 387px with overflow-y: auto; the shadow drops data-simplebar and
   adds oie-auth-form-open, doubled here to beat the vendor class.
   The desktop header (header_1/main shadow): with a desktop user agent at
   narrow widths and on an iPad, the links row ran under the "Start Learning"
   button. The links wrap below 1200 px (the brief's 992 px, widened to the
   iPad landscape width where col-lg-5 is too narrow for the vendor's 32 px
   gaps), the button turns compact below 992 px, and below 576 px the links
   take the whole row (the button column itself is hidden there by
   d-none d-sm-flex in the shadow: the vendor's d-flex is !important). */
.oie-auth-form-open.oie-auth-form-open {
    height: auto;
    max-height: none;
    overflow: visible;
}

@media (max-width: 1199.98px) {
    .oie-header-links > .d-flex {
        flex-wrap: wrap;
        row-gap: var(--oie-space-2);
        column-gap: var(--oie-space-4);
        min-width: 0;
    }
}

/* Fix round 1 (review Minor 1): header_1.min.css fixes .theme-header-1__main
   at height: 84px and frees it only at max-width 991px; the wrapped links
   need the box to grow between 992 and 1199 px as well. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .oie-header-main.oie-header-main {
        height: auto;
        min-height: 84px;
    }
}

@media (max-width: 991.98px) {
    .oie-header-cta.oie-header-cta .btn {
        height: auto;
        min-height: 44px;
        padding-block: var(--oie-space-2);
        padding-inline: var(--oie-space-4);
        font-size: var(--oie-text-14);
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .oie-header-links.oie-header-links {
        flex: 0 0 100%;
        max-width: 100%;
    }
}