/* ==========================================================================
   Review & Fix panel — the frame around the review table.

   The table itself is styled by resort.css, which every page using it
   already links. This is the panel around it: the width bar, the save row,
   and what wide mode folds away.

   Written generically because the Smart Labeler and the Bank Processor both
   mount it now. A page says what it is willing to lose in wide mode by
   marking those elements .review-hide-on-focus — the panel cannot know which
   parts of someone else's form are setup and which are results the user
   still wants beside them.
   ========================================================================== */

/* Off its reading-width leash while reviewing. Both ends are relative, so
   this holds from a laptop to an ultrawide without a breakpoint. */
.main-container,
.main-content {
    transition: max-width 0.3s ease;
}

body.review-focus .main-container,
body.review-focus .main-content {
    max-width: min(100%, 95vw);
}

/* Collapsed, not removed: every field is still filled in on the way back.
   Height is animated with max-height because flexbox cannot interpolate an
   auto height. overflow: hidden is safe here — the only escaping control in
   these forms is a native <select>, which the browser paints in its own
   layer. */
.review-hide-on-focus {
    overflow: hidden;
    max-height: 400rem;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.2s ease;
}

body.review-focus .review-hide-on-focus {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Some things read wrong at half height rather than well — a subtitle or a
   help line is better gone than squeezed. */
body.review-focus .review-drop-on-focus {
    display: none;
}

/* Folding the setup away frees real height. Let the table use it. */
body.review-focus .review-table-wrap {
    max-height: 80vh;
}

/* ===== Width bar ========================================================= */
.review-width-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.review-width-label {
    flex: 1 1 12rem;
    font-size: 0.82rem;
    color: rgba(242, 242, 242, 0.6);
}

.review-width-bar .review-btn.is-on {
    color: #0D2849;
    background: #CEBA4C;
    border-color: #CEBA4C;
}

/* ===== The panel and its save row ======================================== */
.review-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.review-export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.review-export-note {
    flex: 1 1 16rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(242, 242, 242, 0.65);
}

/* A failed save has to be readable, not just present — it is the one thing
   here the user has to act on. */
.review-export-note.is-error {
    color: #ff8080;
}

/* These sit on the page rather than inside a card, so on the gold theme
   they are gold text on a gold gradient — 1.2:1, which is no text at all.
   Navy is what the rest of the gold theme uses against that background. */
body.theme-gold .review-width-label,
body.theme-gold .review-export-note {
    color: rgba(13, 40, 73, 0.9);
}

body.theme-gold .review-export-note.is-error {
    color: #7a1710;
}

@media (prefers-reduced-motion: reduce) {
    .main-container,
    .main-content,
    .review-hide-on-focus { transition: none; }
}