/* =============================================================================
 * IN-12155 brief-J1 / brief-J2 — the upload fork prompt and the RL2 upload
 * surface.
 * =============================================================================
 * Plain CSS, nothing to compile. Every selector is rl2-upload- prefixed and
 * both roots are compiled on demand only for an RL2-granted user who uploads
 * from the Teacher Resources editor, so for everyone else this file matches
 * nothing. No breakpoints: html carries min-width:1282px, so anything below
 * that is dead weight (Brief G §3b).
 *
 * COLOUR STORY (J2 E) — exactly three meanings, nothing else coloured:
 *   brand blue #0074c5   the AI did this (badges, chips, thinking, summary)
 *   teal       #00aec4   pre-filled by a non-AI rung (the existing badge teal)
 *   green      #1f9d55   complete / ready / published
 *   greys                pending, inactive, chrome (incl. the AI skeleton)
 * plus ONE attention tone (J2-polish task 1), never a fourth meaning for the
 * three above:
 *   amber      #d98a00   a required field still needs you, once the AI has
 *                        settled (#9a5b00 text, #f2c27a outline, #fff6e6 tint)
 * Inside the panel, the shared rl2-metadata-suggest.css is re-toned only where
 * it used blue for something that is not the AI (the banner) or a fourth
 * colour (the priority star). That file itself is untouched: the legacy
 * modal renders exactly as before.
 *
 * MOTION (J2 A/B). The ruled animation set, itemized — six keyframes blocks,
 * none with animation-fill-mode (shorthand or longhand), each running only on
 * colour, opacity or transform:
 *   rl2-upload-ring-thinking   K2b's ring pulse, re-pinned stronger: still
 *                              border-color + box-shadow only
 *   rl2-upload-card-shimmer    background-position only (the thinking card;
 *                              J2-polish reuses it for the AI skeleton in
 *                              empty destination fields — no new keyframes)
 *   rl2-upload-rise-in         opacity + transform, on LEAF elements only: a
 *                              field's input, select2's rendered value, the
 *                              description's editing area, a standards chip,
 *                              the summary line
 *   rl2-upload-badge-pop       opacity + transform on the badge (a leaf)
 *   rl2-upload-wash-ai         background-color only (the arriving field's
 *   rl2-upload-wash-suggested  group — never opacity/transform there, because
 *                              a group owns select2 and Froala descendants)
 * plus four transitions: the ring arc (stroke-dashoffset, stroke), buttons
 * and cards (colours, box-shadow) and the remove button (opacity). Opacity
 * and transform create a stacking context only WHILE they run, on elements
 * that stack nothing; no class that animates lingers (the controller removes
 * every arrival class once its animation has run). The C-fix1 trap — a
 * permanent stacking context from fill-mode — cannot occur.
 * prefers-reduced-motion: the controller adds rl2-upload-still to the root,
 * marks no arrivals (fills are instant) and the rules at the end switch the
 * pulses and shimmer off.
 *
 * STACKING. Both roots are appended to <body>, position:fixed, and create
 * their own stacking context (`isolation: isolate`), so nothing inside them
 * competes with the page and nothing on the page can wedge between their
 * layers. Their z-index, 999999990, is chosen against what is ACTUALLY on
 * <body> (css/style-7e756cced8.css):
 *   - above Lotty's side panel and its .ai-open layers (99999999), and so
 *     far above Lotty's in-panel z9 sections, which live inside those;
 *   - BELOW every BetterModal (.better-modal 999999999) — the standards
 *     advanced-search modal better-standards opens (inline 9999999999) must
 *     appear OVER the surface it was opened from, and a BetterModal is
 *     appended to <body> once at construction, i.e. BEFORE this surface, so
 *     at an equal z-index the surface would win on DOM order and hide it;
 *   - below .select2-container--open (9999999999), so the panel's select2
 *     dropdowns, which select2 appends to <body>, open on top.
 * Inside the surface the only z-indexes are small ones in its own context:
 * the discard confirmation (3) and a card's remove confirmation (2).
 * J2-polish task 3: the root is now the dimmed backdrop with a slim gutter,
 * and .rl2-upload-frame (no z-index, no isolation) is the inset surface
 * inside it; the root is still THE stacking root, at the same z-index.
 *
 * LAYOUT (brief-L1, the left-rail experiment). Inside the frame: the header
 * across the top, then .rl2-upload-main — the file rail as a fixed LEFT
 * column with its own vertical scroller, and the panel scroller filling all
 * the width to its right — then the bar across the bottom. The panel fills
 * that width through its three-column field grid; Title and Description span
 * it but cap their typing line at about 78 characters. .rl2-upload-main is a
 * plain flex row: no z-index, no isolation, no stacking layer.
 * ========================================================================== */

/* ---------------------------------------------------------------- prompt -- */

.rl2-upload-fork {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999990;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.rl2-upload-fork-dialog {
    width: 420px;
    padding: 24px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.rl2-upload-fork-title {
    margin: 0 0 9px 0;
    color: #1f2d3a;
    font-size: 16px;
    font-weight: 600;
}

.rl2-upload-fork-text {
    margin: 0 0 18px 0;
    color: #4a5a66;
    font-size: 13px;
    line-height: 1.5;
}

.rl2-upload-fork-actions {
    display: flex;
    gap: 9px;
    margin-bottom: 14px;
}

.rl2-upload-fork-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #4a5a66;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
}

.rl2-upload-fork-remember input {
    margin: 0;
}

/* --------------------------------------------------------------- surface -- */

.rl2-upload-surface {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999990;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    /* J2-polish task 3: the root is the dimmed backdrop; a slim gutter of it
     * shows on all four sides of the inset frame. Still the fixed, isolated
     * stacking root (J1 §2.2) — nothing about the z-index changed. */
    padding: 20px;
    background-color: rgba(31, 45, 58, 0.55);
    color: #1f2d3a;
}

/* The inset surface. It holds everything the root used to (header, rail,
 * scroller, bars, the discard question) and is their containing block; the
 * scroller below is still the surface's own (Brief G). No z-index, no
 * isolation: it adds no stacking layer of its own. */
.rl2-upload-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f4f6f8;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.rl2-upload-surface-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid #dde3e8;
    background-color: #ffffff;
}

.rl2-upload-surface-heading {
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.rl2-upload-surface-title {
    margin: 0;
    color: #1f2d3a;
    font-size: 17px;
    font-weight: 600;
}

/* The colour story, stated once on screen. */
.rl2-upload-legend {
    display: flex;
    gap: 14px;
    color: #6b7a86;
    font-size: 11px;
}

.rl2-upload-legend-item::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #b8c2cc;
    vertical-align: 0;
}

.rl2-upload-legend-item.rl2-upload-legend-ai::before { background-color: #0074c5; }
.rl2-upload-legend-item.rl2-upload-legend-suggested::before { background-color: #00aec4; }
.rl2-upload-legend-item.rl2-upload-legend-ready::before { background-color: #1f9d55; }
.rl2-upload-legend-item.rl2-upload-legend-attention::before { background-color: #d98a00; }

.rl2-upload-surface-tools {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* J2 ruling 5: quiet on purpose. */
.rl2-upload-escape-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7a86;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.rl2-upload-escape-link:hover,
.rl2-upload-escape-link:focus {
    color: #1f2d3a;
}

.rl2-upload-escape-link[disabled] {
    opacity: 0.4;
    cursor: default;
}

.rl2-upload-surface-close {
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #4a5a66;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.rl2-upload-surface-close[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* ------------------------------------------------------------ the rail -- */

/* brief-L1: the row between the header and the bar — the rail on the left,
 * the panel scroller taking the rest. min-height:0 lets it shrink to the
 * frame so both scrollers below engage. */
.rl2-upload-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* The hero, as a fixed left column (brief-L1). 240 px less its 16 px padding
 * leaves the cards J2's width, so faces, rings, status lines and the remove
 * affordance are unchanged. It scrolls up and down on its own; the panel
 * never moves with it. A batch stacks from the top (J2-polish's horizontal
 * centring has no vertical counterpart worth having). The active card is
 * kept in view by rl2UploadRailFollow (the controller file). */
.rl2-upload-rail {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #dde3e8;
    background-color: #ffffff;
}

/* flex-basis auto: in the column the basis is a HEIGHT, so the card keeps
 * its own content height and takes the rail's width. */
.rl2-upload-card {
    position: relative;
    flex: 0 0 auto;
    border: 1px solid #dde3e8;
    border-radius: 6px;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rl2-upload-card.rl2-upload-card-active {
    border-color: #1f2d3a;
    box-shadow: 0 0 0 1px #1f2d3a, 0 4px 12px rgba(31, 45, 58, 0.12);
}

/* Thinking: a slow blue sweep across the card and its tile, on
 * background-position only — no size change, no stacking context. */
.rl2-upload-card.rl2-upload-card-thinking {
    border-color: #8fc1e6;
    background-image: linear-gradient(105deg, rgba(0, 116, 197, 0) 35%, rgba(0, 116, 197, 0.09) 50%, rgba(0, 116, 197, 0) 65%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: rl2-upload-card-shimmer 1.8s linear infinite;
}

.rl2-upload-card.rl2-upload-card-thinking .rl2-upload-tile {
    background-image: linear-gradient(105deg, rgba(0, 116, 197, 0) 35%, rgba(0, 116, 197, 0.12) 50%, rgba(0, 116, 197, 0) 65%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: rl2-upload-card-shimmer 1.8s linear infinite;
}

@keyframes rl2-upload-card-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0% 0;
    }
}

.rl2-upload-card-select {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    padding: 10px 10px 12px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #1f2d3a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rl2-upload-card-select[disabled] {
    cursor: default;
}

/* THE FACE SLOT. A thumbnail when the card has one; otherwise the typed tile:
 * a neutral sheet with its type, the same for every kind (colour is reserved
 * for the three meanings). J3's thumbnails replace the sheet, not the slot. */
.rl2-upload-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 116px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #eef1f4;
}

.rl2-upload-tile-sheet {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 66px;
    height: 84px;
    padding-bottom: 12px;
    border: 1px solid #ccd5dd;
    border-radius: 3px 14px 3px 3px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(31, 45, 58, 0.08);
}

/* The folded corner. */
.rl2-upload-tile-sheet::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 15px;
    height: 15px;
    border-left: 1px solid #ccd5dd;
    border-bottom: 1px solid #ccd5dd;
    border-radius: 0 14px 0 3px;
    background-color: #eef1f4;
}

.rl2-upload-tile-label {
    color: #4a5a66;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.rl2-upload-tile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* J3: a PDF's page-1 face shows the top of the page (its title), not the
 * middle a centred crop would pick from a portrait page. */
.rl2-upload-tile-pdf .rl2-upload-tile-image {
    object-position: 50% 0;
}

.rl2-upload-card-name {
    overflow: hidden;
    padding-right: 40px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rl2-upload-card-status {
    overflow: hidden;
    padding-right: 40px;
    color: #6b7a86;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rl2-upload-card.rl2-upload-card-thinking .rl2-upload-card-status { color: #0074c5; }
.rl2-upload-card.rl2-upload-card-ready .rl2-upload-card-status,
.rl2-upload-card.rl2-upload-card-published .rl2-upload-card-status { color: #1f9d55; font-weight: 600; }

/* J2-polish task 1: settled and still short — "n of 9 required" promoted. */
.rl2-upload-card.rl2-upload-card-attention .rl2-upload-card-status {
    color: #9a5b00;
    font-size: 12px;
    font-weight: 700;
}

.rl2-upload-card.rl2-upload-card-attention {
    border-color: #f2c27a;
}

/* Reviewed (ruling 1) is the user's sign-off, not completeness: a dark
 * check, never the ready green. */
.rl2-upload-card-reviewed-mark {
    margin-right: 2px;
    color: #1f2d3a;
}

/* The progress ring. The arc fills with the nine required fields (dark grey
 * while partial), then the whole ring turns green with a check. */
.rl2-upload-ring {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 50%;
    background-color: #ffffff;
    color: #ffffff;
    font-size: 11px;
}

.rl2-upload-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.rl2-upload-ring-track {
    fill: none;
    stroke: #dde3e8;
    stroke-width: 3.5;
}

.rl2-upload-ring-arc {
    fill: none;
    stroke: #5b6b78;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    transition: stroke-dashoffset 0.45s ease, stroke 0.3s ease;
}

.rl2-upload-ring-check {
    position: relative;
}

.rl2-upload-ring.rl2-upload-ring-ready {
    background-color: #1f9d55;
}

.rl2-upload-ring.rl2-upload-ring-ready .rl2-upload-ring-arc {
    stroke: #1f9d55;
}

.rl2-upload-ring.rl2-upload-ring-ready .rl2-upload-ring-track {
    stroke: #1f9d55;
}

/* Thinking (brief K2b, made unmistakable in J2): border-color and
 * box-shadow only — the ring's size never changes, nothing moves, and
 * neither property creates a stacking context. Works over every ring state. */
.rl2-upload-ring.rl2-upload-ring-thinking {
    border-color: #0074c5;
    animation: rl2-upload-ring-thinking 1.2s ease-in-out infinite;
}

@keyframes rl2-upload-ring-thinking {
    0%,
    100% {
        border-color: #0074c5;
        box-shadow: 0 0 0 3px rgba(0, 116, 197, 0.18);
    }

    50% {
        border-color: #8fc1e6;
        box-shadow: 0 0 0 7px rgba(0, 116, 197, 0.36);
    }
}

/* Ruling 2: the remove affordance, quiet until the card is hovered. */
.rl2-upload-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #dde3e8;
    border-radius: 50%;
    background-color: #ffffff;
    color: #4a5a66;
    font-size: 11px;
    line-height: 22px;
    text-align: center;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.rl2-upload-card:hover .rl2-upload-card-remove,
.rl2-upload-card-remove:focus {
    opacity: 1;
}

.rl2-upload-card-remove[disabled] {
    display: none;
}

.rl2-upload-card-confirm {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.96);
    text-align: center;
}

.rl2-upload-card-confirm-text {
    color: #1f2d3a;
    font-size: 12px;
    font-weight: 600;
}

.rl2-upload-card-confirm-actions {
    display: flex;
    gap: 6px;
}

/* --------------------------------------------------------- the panel -- */

/* The page scroller for the tagging panel (Brief G: nominate one).
 * min-height:0 is what lets a flex child shrink below its content so this
 * overflow actually engages. brief-L1: it is now the flex item to the
 * rail's right; min-width:0 lets it take exactly the remaining width. */
.rl2-upload-surface-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
}

/* brief-L1: the column fills the panel area — J2's 880 px centred cap is
 * gone, so the side whitespace becomes working space. Readability comes
 * from the field grid and the lead fields' line-length cap, never from
 * stretched single inputs. */
.rl2-upload-column {
    min-width: 0;
}

.rl2-upload-panel {
    padding: 24px 28px 16px 28px;
    border: 1px solid #dde3e8;
    border-radius: 6px;
    background-color: #ffffff;
}

.rl2-upload-panel .form-group {
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 4px;
}

.rl2-upload-panel label {
    color: #4a5a66;
    font-size: 12px;
    font-weight: 600;
}

/* Required-ness stays honest: an asterisk, in the neutral ink. */
.rl2-upload-required {
    color: #1f2d3a;
    font-weight: 700;
}

.rl2-upload-required-note {
    margin: 0 8px 6px 8px;
    color: #6b7a86;
    font-size: 11px;
}

/* Title and Description lead. */
.rl2-upload-field-lead label {
    color: #1f2d3a;
    font-size: 13px;
}

.rl2-upload-panel .rl2-upload-field-lead .form-control {
    height: 44px;
    font-size: 18px;
    font-weight: 600;
}

/* brief-L1 readability guardrail: the lead fields' group spans the full
 * panel, but the typing line stops at about 78 characters of its own font.
 * The description editor is the modal's froala-editor element, unchanged;
 * it is capped from here by its attribute. */
.rl2-upload-panel .rl2-upload-field-lead .form-control,
.rl2-upload-panel .rl2-upload-field-lead [froala-editor] {
    max-width: 78ch;
}

/* The vocabularies, compact: three to a row. */
.rl2-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
}

/* The shared banner, re-toned neutral here: it covers every rung, not only
 * the AI, so it must not wear the AI's blue. */
.rl2-upload-panel .rl2-suggest-banner {
    margin: 0 8px 14px 8px;
    border-color: #dde3e8;
    border-left-color: #6b7a86;
    background-color: #f4f6f8;
    color: #1f2d3a;
}

.rl2-upload-panel .rl2-suggest-banner-icon,
.rl2-upload-panel .rl2-suggest-banner-dismiss {
    color: #4a5a66;
}

/* The suggested-input stripe is drawn by the badge's colour instead: the
 * shared stripe is teal even when the AI filled the field. */
.rl2-upload-panel .rl2-suggested-input.rl2-suggested-input {
    border-left: 1px solid #ccd5dd;
    background-color: #ffffff;
}

/* The priority star is a fourth colour in the shared sheet. */
.rl2-upload-panel .rl2-standard-suggestion-priority {
    color: #1f2d3a;
}

.rl2-upload-panel .rl2-ai-thinking {
    margin: 0 8px 12px 8px;
}

/* The summary moment (J2 A): the AI's colour, one line. */
.rl2-upload-ai-summary {
    margin: 0 8px 12px 8px;
    color: #005a99;
    font-size: 13px;
    font-weight: 600;
}

.rl2-upload-disclosure {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 8px 0 4px 0;
    padding: 10px 8px;
    border: 0;
    border-top: 1px solid #eef1f4;
    background: transparent;
    color: #1f2d3a;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.rl2-upload-disclosure-icon {
    color: #6b7a86;
    font-size: 11px;
}

.rl2-upload-disclosure[aria-expanded="true"] .rl2-upload-disclosure-icon {
    transform: rotate(90deg);
}

.rl2-upload-disclosure-count {
    color: #6b7a86;
    font-weight: normal;
}

.rl2-upload-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 16px 0 8px 0;
}

.rl2-upload-panel-footer-note {
    color: #1f2d3a;
    font-size: 12px;
    font-weight: 600;
}

/* ------------------------------------- still yours (J2-polish task 1) -- */

/* A required field still unmet once the card's AI has settled. Amber — the
 * one attention tone, never blue, teal or green. Static: no animation, so it
 * can sit beside an arrival wash without competing. The class clears the
 * moment the field is met (it is computed, not latched). */
.rl2-upload-panel .form-group.rl2-upload-attention {
    background-color: #fff6e6;
    box-shadow: inset 3px 0 0 #d98a00, 0 0 0 1px #f2c27a;
}

.rl2-upload-panel .form-group.rl2-upload-attention > label,
.rl2-upload-panel .form-group.rl2-upload-attention > label .rl2-upload-required {
    color: #9a5b00;
}

/* ------------------------------ AI lands here (J2-polish task 2) -- */

/* While the AI reads, an empty AI-fillable field shows a soft moving band
 * IN its own input area: a background on the input, select2's selection box
 * or Froala's editing area. Background only — it never overlays or blocks
 * typing, and it reuses the card shimmer's background-position keyframes, so
 * no new animation and no stacking context. :focus-within drops it in the
 * same frame the user clicks in; the controller (rl2UploadClaim) then keeps
 * it gone. Grey: pending. */
.rl2-upload-panel .rl2-upload-skeleton .form-control,
.rl2-upload-panel .rl2-upload-skeleton .select2-selection,
.rl2-upload-panel .rl2-upload-skeleton .fr-element,
.rl2-upload-panel .rl2-upload-strip-skeleton {
    background-image: linear-gradient(100deg, rgba(31, 45, 58, 0) 30%, rgba(31, 45, 58, 0.07) 50%, rgba(31, 45, 58, 0) 70%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: rl2-upload-card-shimmer 1.6s linear infinite;
}

.rl2-upload-panel .rl2-upload-skeleton:focus-within .form-control,
.rl2-upload-panel .rl2-upload-skeleton:focus-within .select2-selection,
.rl2-upload-panel .rl2-upload-skeleton:focus-within .fr-element {
    background-image: none;
    animation: none;
}

/* The standards-suggestion strip, before its chips arrive. */
.rl2-upload-panel .rl2-upload-strip-skeleton {
    height: 26px;
    margin-top: 6px;
    border: 1px dashed #ccd5dd;
    border-radius: 13px;
    background-color: #f4f6f8;
}

/* ------------------------- suggested standards (J2-polish task 5) -- */

/* The chips wrap inside their own bounded block. */
.rl2-upload-panel .rl2-standard-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    margin-top: 6px;
    padding: 8px 8px 4px 8px;
    border: 1px solid #dde3e8;
    border-radius: 6px;
    background-color: #ffffff;
}

.rl2-upload-panel .rl2-standard-suggestions .rl2-standard-suggestions-label {
    flex: 0 0 100%;
    margin-bottom: 4px;
}

.rl2-upload-chips-more {
    margin: 0 4px 4px 0;
    padding: 1px 8px;
    border: 0;
    background: transparent;
    color: #1f2d3a;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ------------------------------------------------- arrivals (J2 A) -- */

/* Waiting for its turn in the stagger: the value is already in the model
 * but held invisible, so nothing shows before its own entrance. Leaves only. */
.rl2-upload-panel .rl2-upload-arrive-wait .form-control,
.rl2-upload-panel .rl2-upload-arrive-wait .select2-selection__rendered,
.rl2-upload-panel .rl2-upload-arrive-wait .fr-element,
.rl2-upload-panel .rl2-upload-arrive-wait .rl2-suggested-badge,
.rl2-upload-panel .rl2-standard-suggestion.rl2-upload-arrive-wait,
.rl2-upload-panel .rl2-upload-ai-summary.rl2-upload-arrive-wait {
    opacity: 0;
}

.rl2-upload-panel .rl2-upload-arrive .form-control,
.rl2-upload-panel .rl2-upload-arrive .select2-selection__rendered,
.rl2-upload-panel .rl2-upload-arrive .fr-element,
.rl2-upload-panel .rl2-standard-suggestion.rl2-upload-arrive,
.rl2-upload-panel .rl2-upload-ai-summary.rl2-upload-arrive {
    animation: rl2-upload-rise-in 360ms ease-out;
}

.rl2-upload-panel .rl2-upload-arrive .rl2-suggested-badge {
    animation: rl2-upload-badge-pop 360ms ease-out;
}

/* The group washes in its rung's colour — background-color only. */
.rl2-upload-panel .form-group.rl2-upload-arrive-ai {
    animation: rl2-upload-wash-ai 900ms ease-out;
}

.rl2-upload-panel .form-group.rl2-upload-arrive-suggested {
    animation: rl2-upload-wash-suggested 900ms ease-out;
}

@keyframes rl2-upload-rise-in {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rl2-upload-badge-pop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    60% {
        opacity: 1;
        transform: scale(1.15);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rl2-upload-wash-ai {
    0% {
        background-color: rgba(0, 116, 197, 0.14);
    }

    100% {
        background-color: rgba(0, 116, 197, 0);
    }
}

@keyframes rl2-upload-wash-suggested {
    0% {
        background-color: rgba(0, 174, 196, 0.14);
    }

    100% {
        background-color: rgba(0, 174, 196, 0);
    }
}

/* ------------------------------------------------------- the bar (D) -- */

.rl2-upload-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 24px;
    border-top: 1px solid #dde3e8;
    background-color: #ffffff;
}

.rl2-upload-bar-status {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.rl2-upload-bar-count {
    flex: 0 0 auto;
    color: #1f2d3a;
    font-size: 13px;
    font-weight: 600;
}

/* What is missing, on the first incomplete card; a click goes there. */
.rl2-upload-bar-hint {
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4a5a66;
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: underline dotted;
    cursor: pointer;
}

.rl2-upload-bar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rl2-upload-btn {
    padding: 8px 16px;
    border: 1px solid #ccd5dd;
    border-radius: 4px;
    background-color: #ffffff;
    color: #1f2d3a;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rl2-upload-btn:hover,
.rl2-upload-btn:focus {
    border-color: #6b7a86;
}

.rl2-upload-btn[disabled] {
    border-color: #e3e8ec;
    background-color: #eef1f4;
    color: #8a97a3;
    cursor: not-allowed;
}

.rl2-upload-btn.rl2-upload-btn-dark {
    border-color: #1f2d3a;
    background-color: #1f2d3a;
    color: #ffffff;
}

.rl2-upload-btn.rl2-upload-btn-dark[disabled] {
    border-color: #e3e8ec;
    background-color: #eef1f4;
    color: #8a97a3;
}

/* Upload & publish: green only when everything is complete; disabled LOOKS
 * disabled. */
.rl2-upload-btn.rl2-upload-publish {
    border-color: #1f9d55;
    background-color: #1f9d55;
    color: #ffffff;
}

.rl2-upload-btn.rl2-upload-publish[disabled] {
    border-color: #e3e8ec;
    background-color: #eef1f4;
    color: #8a97a3;
}

.rl2-upload-bar.rl2-upload-bar-published {
    background-color: #edf8f1;
}

.rl2-upload-bar-done {
    color: #17723e;
    font-size: 14px;
    font-weight: 600;
}

.rl2-upload-library-link {
    color: #17723e;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* -------------------------------------------- discard confirmation (4) -- */

.rl2-upload-confirm {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(31, 45, 58, 0.45);
}

.rl2-upload-confirm-dialog {
    width: 420px;
    padding: 24px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.rl2-upload-confirm-title {
    margin: 0 0 8px 0;
    color: #1f2d3a;
    font-size: 16px;
    font-weight: 600;
}

.rl2-upload-confirm-text {
    margin: 0 0 18px 0;
    color: #4a5a66;
    font-size: 13px;
}

.rl2-upload-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ------------------------------------------- prefers-reduced-motion -- */

/* The controller sets rl2-upload-still from prefers-reduced-motion. Thinking
 * still shows (a steady blue ring), it just does not pulse or sweep. */
.rl2-upload-surface.rl2-upload-still .rl2-upload-ring.rl2-upload-ring-thinking,
.rl2-upload-surface.rl2-upload-still .rl2-upload-card.rl2-upload-card-thinking,
.rl2-upload-surface.rl2-upload-still .rl2-upload-card.rl2-upload-card-thinking .rl2-upload-tile,
.rl2-upload-surface.rl2-upload-still .rl2-ai-thinking-dot,
.rl2-upload-surface.rl2-upload-still .rl2-upload-skeleton .form-control,
.rl2-upload-surface.rl2-upload-still .rl2-upload-skeleton .select2-selection,
.rl2-upload-surface.rl2-upload-still .rl2-upload-skeleton .fr-element,
.rl2-upload-surface.rl2-upload-still .rl2-upload-strip-skeleton {
    animation: none;
}

/* J2-polish task 2, reduced motion: the skeleton stays, as a STATIC band. */
.rl2-upload-surface.rl2-upload-still .rl2-upload-skeleton .form-control,
.rl2-upload-surface.rl2-upload-still .rl2-upload-skeleton .select2-selection,
.rl2-upload-surface.rl2-upload-still .rl2-upload-skeleton .fr-element,
.rl2-upload-surface.rl2-upload-still .rl2-upload-strip-skeleton {
    background-position: 50% 0;
}

.rl2-upload-surface.rl2-upload-still .rl2-upload-ring.rl2-upload-ring-thinking {
    box-shadow: 0 0 0 4px rgba(0, 116, 197, 0.25);
}

.rl2-upload-surface.rl2-upload-still .rl2-upload-ring-arc,
.rl2-upload-surface.rl2-upload-still .rl2-upload-card,
.rl2-upload-surface.rl2-upload-still .rl2-upload-btn,
.rl2-upload-surface.rl2-upload-still .rl2-upload-card-remove {
    transition: none;
}