/* ============================================================
   Reusable styles for every "word count" modal in the system.

   Naming convention: .wc-{block}[-{element}][.is-{state}]
   The classes are generic on purpose so any word-count modal
   can inherit them. The one exception is the HOST-PAGE OVERRIDES
   section near the bottom, which has to keep an id scope to
   out-specify the quote page's legacy modal CSS — see the note
   there.

   Tokens
   ------
   Everything resolves against variables.css, which the host page
   links before the service forms are injected (quote.html and
   base.html both do) — so there are no local :root redeclarations
   and no var() fallbacks here.

   Load order:  variables.css  →  bootstrap  →  select2-theme.css
                →  select2.min.css  →  this file

   select2-theme.css / flatpickr-theme.css / native-select-theme.css
   are linked by the host page (quote.html links all three, ahead of
   this file, before any service form is injected) and own the shared
   field skin. Nothing they already declare is repeated here — the SELECT2
   BRIDGE section at the bottom carries only the deltas this modal
   needs.
   ============================================================ */

/* ── Modal shell ─────────────────────────────────────────── */
.wc-modal-container {
    height: 100vh;
    /* dvh second so it only lands where supported: on iOS Safari 100vh is
       the *large* viewport, so a centred dialog sits behind the toolbar. */
    height: 100dvh;
    display: flex;
    align-items: center;
    max-width: 640px !important;
    margin-inline: auto;
    padding-inline: 20px;
}

.wc-modal .modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--color-surface-white);
    overflow: hidden;
}

.wc-modal .modal-dialog {
    max-width: 640px;
}

/* ── Header ──────────────────────────────────────────────── */
.wc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 22px;
    border-bottom: none;
    background: var(--color-surface-white);
    flex-shrink: 0;
}

.wc-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 1.25;
}

.wc-header:has(.wc-subtitle) {
    align-items: flex-start;
}

.wc-titlebox {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wc-subtitle {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
    margin: 0;
}
.wc-title .floating-info,
.wc-title .wc-info {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    cursor: help;
    transition: color var(--transition-fast);
}

.wc-title .floating-info:hover,
.wc-title .wc-info:hover {
    color: var(--color-brand-gold);
}

/* ── Icon buttons (close, edit, delete, save…) ───────────── */
.wc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.wc-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* header close — a filled circle, so it reads as a chip not a button */
.wc-header .wc-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
}

.wc-header .wc-icon-btn svg {
    width: 22px;
    height: 22px;
}

.wc-header .wc-icon-btn:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary) !important;
}

/* row actions — bare gold glyphs on the tinted row */
.wc-file .wc-icon-btn {
    color: var(--color-text-primary);
}

.wc-file .wc-icon-btn:hover {
    background: var(--color-surface-white);
    color: var(--color-text-primary) !important;
}

.wc-icon-btn.is-danger:hover {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger) !important;
}

/* ── Body ────────────────────────────────────────────────── */
.wc-body {
    padding: 0 24px;
    background: var(--color-surface-white);
    max-height: min(64vh, 560px);
    max-height: min(64dvh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
}

.wc-body::-webkit-scrollbar { width: 6px; }
.wc-body::-webkit-scrollbar-track { background: transparent; }
.wc-body::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: var(--radius-full);
}

/* ── Labels / selects ────────────────────────────────────── */
.wc-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-primary);
    margin: 0;
}

.wc-select {
    width: 100%;
    min-width: 0;
    height: var(--field-h);
    appearance: none;
    -webkit-appearance: none;
    padding: 0 42px 0 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
    background-color: var(--color-surface-inset);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    border: none;
    border-radius: var(--field-radius);
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wc-select:hover {
    background-color: var(--color-surface-subtle);
}

.wc-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--gold-border);
}

.wc-hint {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin: 0;
    flex-basis: 100%;
}

.wct-inline-fields {
    gap: 12px;
}

/* ── Inline alerts (validation feedback) ─────────────────── */
.wc-alerts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wc-alerts:not(:empty) {
    margin-bottom: 12px;
}

.wc-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--radius-sm);
    animation: wc-slide-in var(--transition-base) both;
}

.wc-alert svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.wc-alert.is-error {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.wc-alert.is-warning {
    background: var(--color-surface-gold-pale);
    color: var(--color-text-primary);
    border: 1px solid var(--gold-border);
}

.wc-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-size: 1rem;
    opacity: 0.6;
}

.wc-alert-close:hover { opacity: 1; }

/* ── Files list (sits at the top, above the dropzone) ────── */
.wc-files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: wc-row;
}

.wc-files:has(li) {
    margin-bottom: 16px;
}

/* Each row is its own tinted card. Anything that needs the full width
   (progress note, count warning) wraps onto a second line inside it. */
.wc-file {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    background: var(--color-surface-inset);
    border-radius: var(--radius-md);
    counter-increment: wc-row;
    transition: box-shadow var(--transition-fast),
                opacity var(--transition-base),
                transform var(--transition-base);
    animation: wc-slide-in var(--transition-base) both;
    overflow: hidden;
}

/* row number (1, 2, 3, …) */
.wc-file::before {
    content: counter(wc-row);
    flex: 0 0 auto;
    width: 14px;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-gold);
}

.wc-file.is-leaving {
    opacity: 0;
    transform: translateX(14px);
}

/* row whose count couldn't be detected — tinted to stand out from the
   normal (inset gray) rows */
.wc-file.is-attention {
    background: var(--gold-pale);
}

/* file-type icon badge */
.wc-file-badge {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: var(--color-surface-white);
    border: none;
    border-radius: var(--radius-sm);
}

.wc-file-badge svg {
    width: 20px;
    height: 20px;
}

/* name + secondary line.
   flex-basis 0 (not auto) matters: the row wraps, and a long file name
   with an `auto` basis would push the count column onto its own line
   instead of ellipsising. */
.wc-file-main {
    flex: 1 1 0;
    min-width: 0;
}

.wc-file-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 1.35;
}

.wc-file-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 1px;
}

.wc-file-meta b {
    color: inherit;
    font-weight: 400;
}

/* right-hand column: document type over the counted units */
.wc-file-count {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 0;
    text-align: right;
}

.wc-file-doctype {
    display: block;
    max-width: 190px;
    font-size: 13px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc-file-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-brand-gold);
    white-space: nowrap;
}

.wc-file-value b { font-weight: 500; }

.wc-file-warn {
    order: 2;
    flex-basis: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 2px;
    background: var(--color-surface-white);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    color: #510909;
}

.wc-file-warn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* counting progress bar (thin, indeterminate) */
.wc-progress {
    position: relative;
    height: 4px;
    width: 100%;
    margin-top: 8px;
    border-radius: var(--radius-full);
    background: var(--color-surface-white);
    overflow: hidden;
}

.wc-progress-bar {
    height: 100%;
    width: 38%;
    border-radius: inherit;
    background: var(--color-brand-gold);
    animation: wc-progress-slide 1.05s ease-in-out infinite;
}

/* per-row error strip */
.wc-file-note {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px dashed var(--color-border);
}

.wc-file-note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.wc-file.is-error { border-left: 3px solid var(--color-status-danger); }
.wc-file.is-error .wc-file-note { color: var(--color-status-danger); }

.wc-file .wc-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* highlight pulse after a successful save */
.wc-file.is-saved {
    animation: wc-saved 0.9s ease;
}

/* row actions */
.wc-file-actions {
    position: relative;          /* anchors the "Remove?" popover */
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: 4px;
}

/* ── Inline edit mode (sits at the end of the row) ───────── */
.wc-file-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

.wc-edit-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.wc-input {
    width: 92px;
    height: 36px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-surface-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wc-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(149, 128, 73, 0.18) !important;
    border: none;
    outline: none;
}
/* The row's document type, revealed alongside the count when Edit is
   pressed. Sized to the text rather than given the .wc-input width: a
   subject name like "Medical & Pharmaceutical" needs the room, while the
   count beside it never needs more than a few digits.

   max-width keeps it from pushing the count and the Save button off the
   end of a row whose file name is already long; the native select
   truncates its own label rather than overflowing. */
.wc-edit-doctype {
    /* assets/select/css/jquery.select.css ends with a GLOBAL `select {
       display: none }` - the legacy plugin hid every native select on the page
       and drew its own. The quote page still loads it, so a select that does
       not state its own display is invisible there while looking perfectly
       styled everywhere else. native-select-theme.css works around the same
       rule with `display: flex !important`; a class beats a type selector on
       specificity, so this needs no !important. */
    display: inline-block;
    width: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px 15px;
    cursor: pointer;
    height: 36px;
    min-width: 150px;
    max-width: 230px;
    padding: 0 30px 0 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
    background-color: var(--color-surface-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Matches .wc-input's focus ring exactly - the two sit side by side, and
   two different focus treatments in one row reads as a mistake. */
.wc-edit-doctype:focus-visible {
    box-shadow: 0 0 0 3px rgba(149, 128, 73, 0.18) !important;
    border: none;
    outline: none;
}


.wc-btn-mini {
    height: 32px;
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.wc-btn-mini.is-yes {
    background: var(--color-status-danger);
    color: var(--color-surface-white);
}

.wc-btn-mini.is-yes:hover { background: var(--color-status-danger); }

.wc-btn-mini.is-no {
    color: var(--color-text-primary);
    background: none;
}

.wc-btn-mini.is-no:hover {
    background: var(--color-surface-white);
}

/* ── "Remove?" popover ─────────────────────────────────────── */
.wc-remove-confirm {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 14px;
    background: var(--color-surface-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(34, 30, 27, .16);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-text-primary);
    animation: wc-confirm-in .16s ease-out;
}

.wc-remove-text { font-weight: 500; }

/* the caret, pointing back down at the button it belongs to */
.wc-remove-confirm::after {
    content: "";
    position: absolute;
    right: 11px;                    /* (32px button - 10px caret) / 2 */
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: var(--color-surface-white);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transform: rotate(45deg);
}

/* a document card's trash is a full-height field, not a row glyph */
.cert-remove-wrap .wc-remove-confirm::after { right: 19px; }

/* A row is clipped so deleteRowFile() can collapse it to nothing, which
   would cut the popover off with it. The popover is only in the DOM
   while the question is up, so the row un-clips for exactly that long. */
.wc-file:has(.wc-remove-confirm) {
    overflow: visible;
    z-index: 1;
}

/* The first row has nothing above it inside the scrolling body, so its
   popover opens downward instead. */
.wc-file:first-child .wc-remove-confirm {
    top: calc(100% + 8px);
    bottom: auto;
    animation-name: wc-confirm-in-down;
}

.wc-file:first-child .wc-remove-confirm::after {
    top: -6px;
    bottom: auto;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

/* the trash stays lit in its danger state while its popover is open */
.wc-file .wc-icon-btn.is-danger.is-confirming,
.cert-modal-group-card .cert-remove-btn.is-confirming {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger);
}

/* the inline strip's buttons are field-height; in a popover they are
   chips, sized to the question beside them */
.wc-remove-confirm .wc-btn-mini {
    height: 28px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 28px;
}

/* a darker red than --color-status-danger; --color-status-danger-hover
   is a pale background tint, not a hover for a filled button */
.wc-remove-confirm .wc-btn-mini.is-yes:hover { background: #b91c1c; }

/* on white the ghost No needs an edge to read as a button */
.wc-remove-confirm .wc-btn-mini.is-no {
    background: var(--color-surface-white);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-text-secondary);
}

.wc-remove-confirm .wc-btn-mini.is-no:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
}

/* the field focus rings are gold and navy; this is the danger
   equivalent, which has no token of its own */
.wc-remove-confirm .wc-btn-mini:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .28);
}

/* ── Dropzone ────────────────────────────────────────────── */
.wc-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    background: var(--color-surface-white);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background var(--transition-fast);
}

.wc-dropzone:hover,
.wc-dropzone:focus-visible {
    border-color: var(--color-brand-gold);
    outline: none;
}

.wc-dropzone.is-dragover {
    border-color: var(--color-brand-gold);
    background: var(--color-surface-gold-pale);
}

.wc-dropzone.is-dragover .wc-dropzone-cta { pointer-events: none; background: var(--color-surface-gold-pale); }

/* the field row that lives inside the dropzone (subject / doc type) */
.wc-dropzone-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    width: 100%;
    margin-bottom: 0;
    cursor: default;
    position: relative;
    z-index: 1;
}

.wc-dropzone-field .wc-label {
    white-space: nowrap;
}

.wc-dropzone-field .wc-select {
    flex: 1 1 160px;
    width: auto;
}

/* icon + browse text + hint, inside their own inset panel */
.wc-dropzone-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    width: 100%;
    padding: 26px 20px;
    background: var(--color-surface-inset);
    border-radius: var(--radius-md);
}

/* the wrapper that holds the title + hint */
.wc-dropzone-cta > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wc-dropzone-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-surface-white);
    color: var(--color-brand-gold);
}

.wc-dropzone-icon svg {
    width: 32px;
    height: 32px;
}

.wc-dropzone-title {
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: 0;
}

.wc-dropzone-hint {
    font-size: 13px;
    color: var(--color-text-placeholder);
    line-height: 2;
    margin: 0;
}

.wc-dropzone-hint .wc-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-link);
    text-decoration: underline;
    cursor: pointer;
}

/* ── Summary cards (the conclusion cards) ────────────────── */
.wc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.wc-stat {
    display: flex;
    align-items: center;
    width: stretch;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface-inset);
    border: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.wc-stat-icon { display: none; }

.wc-stat-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.wc-stat-label {
    order: -1;                      /* label sits above the number */
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--color-text-secondary);
}

.stat-value {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* pop when a value changes (added by JS, removed on animationend) */
.wc-stat.is-bumped {
    background: var(--color-surface-gold-pale);
}

.wc-stat.is-bumped .stat-value {
    transform-origin: left center;
    animation: wc-bump 0.45s ease;
    color: var(--color-brand-gold);
}

/* ── Footer ──────────────────────────────────────────────── */
.wc-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 24px;
    border-top: none;
    background: var(--color-surface-white);
}

/* bootstrap gives .modal-footer children a .25rem margin — drop it */
.wc-footer > * { margin: 0; }

.wc-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin: 0;
    min-width: 0;
}

.wc-note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--color-brand-gold);
}

.wc-note .wc-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-link);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────── */
.wc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--field-h);
    padding: 0 20px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--field-radius);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.wc-btn:focus-visible {
    outline: 2px solid var(--color-brand-gold);
    outline-offset: 2px;
}

.wc-btn-primary {
    width: fit-content;
    margin-left: auto;
    background: var(--color-brand-gold);
    color: var(--color-surface-white);
}

.wc-btn-primary:hover {
    background: var(--color-brand-gold-hover);
}

.wc-btn-primary:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    box-shadow: none;
    background: var(--color-brand-gold);
}

.wc-btn-ghost {
    background: var(--color-surface-white);
    color: var(--color-brand-gold);
    border: 1px solid var(--gold-border);
}

.wc-btn-ghost:hover {
    background: var(--color-surface-gold-pale);
}

/* ── Empty state ─────────────────────────────────────────── */
.wc-empty {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    padding: 4px 0 12px;
}

/* ── Keyboard focus (global inside the modal) ────────────── */
.wc-modal :is(button, [role="button"], select, input):focus-visible {
    box-shadow: 0 0 0 3px rgba(149, 128, 73, 0.18);
}

/* ── Failed-upload row ─────────────────────────────────────── */
.wc-file-note { order: 3; }

.wc-file-value[data-flag="error"] {
    color: var(--color-status-danger);
}

#attestationDocsUploadModal .modal-header { border-bottom: none; }

#attestationDocsUploadModal .modal-footer {
    border-top: none;
    align-items: stretch !important;
}

/* the legacy rules push this <p> down by 10%–25% */
#attestationDocsUploadModal #upload-file-text p { margin-top: 0 !important; }

#attestationDocsUploadModal .wc-icon-btn i      { font-size: 14px; line-height: 1; }
#attestationDocsUploadModal .wc-header .wc-icon-btn i { font-size: 16px; }

.wc-dropzone-field .select2-container {
    flex: 1 1 0;
    min-width: 0;
}

.wc-modal .wc-dropzone-field .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
}

/* Stated HERE, at the specificity its neighbours use, rather than on a plainer
   selector: Project Detail loads this stylesheet and native-select-theme.css
   and nothing else of the pair - select2-theme.css, which supplies the flex
   centring above and the nowrap below, is a Quote-page stylesheet. So the two
   pickers that share this line there were falling back to whatever the base
   select2 CSS gave them, and a long value broke onto a second line, grew the
   control, and pushed the whole field row out of shape.

   min-width:0 is what lets it shrink far enough to ellipsis at all: a flex
   item will not go below its content width without it. */
.wc-modal .wc-dropzone-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 30px;
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.wc-modal .wc-dropzone-field .select2-container .select2-selection--single:hover {
    background: var(--color-surface-subtle) !important;
}

/* open / focused: same skin as closed — no ring, no squared corners */
.wc-modal .wc-dropzone-field .select2-container.select2-container--open .select2-selection--single,
.wc-modal .wc-dropzone-field .select2-container.select2-container--focus .select2-selection--single {
    background: var(--color-surface-inset) !important;
    box-shadow: none !important;
    border-radius: var(--field-radius) !important;
}

.wc-modal .wc-dropzone-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    transition: transform var(--transition-fast);
    pointer-events: none;
}

/* (select2's CSS triangle in <b> is already hidden by select2-theme.css) */

.wc-modal .wc-dropzone-field .select2-container--open .select2-selection__arrow {
    transform: rotate(180deg) !important;
}

/* ── dropdown panel ─────────────────────────────────────── */
.wc-modal .select2-container.select2-container--default .select2-dropdown {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
}

/* detach it from the field */
.wc-modal .select2-container.select2-container--default .select2-dropdown--below { margin-top: 6px; }
.wc-modal .select2-container.select2-container--default .select2-dropdown--above  { margin-top: -6px; }

.wc-modal .select2-container--default .select2-results__option {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
}

.wc-modal .select2-container.select2-container--default .select2-results__option--selected,
.wc-modal .select2-container.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--color-surface-subtle) !important;
    color: var(--color-text-primary) !important;
}

.wc-modal .select2-container.select2-container--default .select2-results__option--highlighted,
.wc-modal .select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-surface-inset) !important;
    color: var(--color-text-primary) !important;
}

/* (the panel's thin scrollbar comes from select2-theme.css) */

/* the first label sits against the panel's own top padding */
.wc-modal .select2-container--default .select2-results__option--group:first-child > .select2-results__group,
.wc-modal .select2-container--default .select2-results__option[role="group"]:first-child > .select2-results__group {
    padding-top: 2px !important;
}

.wc-modal .select2-container--default .select2-results__options--nested {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-modal .select2-container--default .select2-results__options--nested .select2-results__option {
    padding: 10px 12px;
}

/* ============================================================
   CERTIFIED TRANSLATION — DOCUMENT CARDS
   ============================================================ */
.wc-docs-label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 10px;
}

#certModalGroupsList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── The card shell ──────────────────────────────────────── */
.cert-modal-group-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--color-surface-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    animation: wc-slide-in var(--transition-base) both;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cert-modal-group-card.cert-group-active {
    border-color: var(--gold-border);
}

/* First run: one type-less document, so the picker *is* the modal body */
.cert-modal-group-card.is-only.is-typeless {
    padding: 0;
    border: none;
    background: none;
}

.cert-modal-group-card.is-only.is-typeless .cert-collapse-btn { display: none; }

/* With Collapse hidden the second column is 0-wide, but its 12px gap would
   still eat into the first — which would leave the tile grid and the select
   narrower than .cert-controls below them. One column instead. */
.cert-modal-group-card.is-only.is-typeless .cert-type-picker {
    grid-template-columns: minmax(0, 1fr);
}

/* Project Detail's ".btn { margin: 10px }" would otherwise push the
   card's buttons out of line with the fields beside them. */
.cert-modal-group-card .btn { margin: 0; }


.cert-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 6px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cert-collapse-btn:hover { background: var(--color-surface-inset); color: var(--color-text-primary); }

.cert-collapse-btn svg,
.cert-collapse-btn i { width: 14px; height: 14px; font-size: 13px; transition: transform var(--transition-fast); }

/* ── Collapsed summary line ──────────────────────────────── */
/* Rendered in every card; only a collapsed one shows it. */
.cert-card-summary { display: none; }

.cert-modal-group-card.is-collapsed {
    padding: 0;
    background: var(--color-surface-inset);
    border-color: transparent;
    gap: 0;
}

.cert-modal-group-card.is-collapsed > * { display: none; }

.cert-modal-group-card.is-collapsed > .cert-card-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: inherit;
    background: none;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.cert-modal-group-card.is-collapsed > .cert-card-summary:hover {
    background: var(--color-surface-subtle);
}

.cert-summary-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-white);
    color: var(--color-text-primary);
    font-size: 16px;
}

.cert-summary-icon svg { width: 24px; height: 24px; }

/* Name and tally share one column so the icon can sit beside the *pair*: side by
   side while there is room, tally under the name once there isn't. Without this
   the tally wrapped to a line of its own below the icon, not below the name. */
.cert-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cert-summary-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-summary-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* the "|" between "2 Files" and "412 words" */
.cert-summary-meta > span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    background: var(--color-text-secondary);
}

.cert-summary-meta b { font-weight: 500; color: var(--color-text-primary); }

.cert-summary-chevron {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary);
}

.cert-summary-chevron svg { width: 16px; height: 16px; }

/* ── Type picker: label + icon grid + "Other document" ───── */
.cert-type-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.cert-type-label { grid-row: 1; grid-column: 1; }
.cert-type-picker > .cert-collapse-btn { grid-row: 1; grid-column: 2; }
.cert-type-grid  { grid-row: 2; grid-column: 1 / -1; }

/* select2 swaps the <select> for a .select2-container span — that span is the
   grid item once it initialises, the raw select only for the first frame. */
.cert-type-picker > .cert-doc-type-select,
.cert-type-picker > .select2-container { grid-row: 3; grid-column: 1 / -1; }

/* Only the first document renders the tile grid (see certQuickPicksHtml), so on
   every card after it the select moves up into the row the grid would have filled:
   an empty grid row still contributes one of the 12px gaps. Deliberately one class
   below .is-locked's specificity — a locked card puts the select on row 1 either way. */
.cert-type-picker:not(:has(.cert-type-grid)) > .cert-doc-type-select,
.cert-type-picker:not(:has(.cert-type-grid)) > .select2-container { grid-row: 2; }

/* Once a file exists the type is fixed, so the label and the tile grid go —
   the disabled select alone carries the answer. Both come back the moment the
   last file is removed: certRefreshCardChrome() owns .is-locked. */
.cert-modal-group-card.is-locked .cert-type-label,
.cert-modal-group-card.is-locked .cert-type-grid { display: none; }

/* label + grid are gone, so rows 2 and 3 never get created — the select takes
   row 1 and shares it with Collapse. No stray gaps: an implicit row with no
   items in it doesn't exist. */
.cert-modal-group-card.is-locked .cert-type-picker > .cert-doc-type-select,
.cert-modal-group-card.is-locked .cert-type-picker > .select2-container {
    grid-row: 1;
    grid-column: 1;
}

.cert-type-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.cert-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cert-modal-group-card .cert-quick-pick {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 14px 12px;
    background: var(--color-surface-inset);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast),
                box-shadow var(--transition-fast);
}

.cert-quick-pick-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--color-text-primary);
    font-size: 18px;
    line-height: 1;
}

.cert-quick-pick-icon svg { width: 20px; height: 20px; }

/* the tile's caption — ellipsised, because the names are free text */
.cert-quick-pick-name {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-modal-group-card .cert-quick-pick:hover:not(:disabled) {
    border-color: var(--gold-border);
    background: var(--color-surface-gold-pale);
}

.cert-modal-group-card .cert-quick-pick:focus-visible {
    outline: none;
    border: none;
    box-shadow: var(--focus-ring-gold);
}

.cert-modal-group-card .cert-quick-pick.cert-quick-pick-active {
    border-color: var(--color-brand-gold);
    background: var(--color-surface-gold-pale);
}

.cert-modal-group-card .cert-quick-pick.cert-quick-pick-active .cert-quick-pick-icon,
.cert-modal-group-card .cert-quick-pick.cert-quick-pick-active .cert-quick-pick-name {
    color: var(--color-brand-gold);
}

.cert-modal-group-card .cert-quick-pick:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* the two-tone placeholder select2 renders for the "Other document" row */
.cert-other-ph b { font-weight: 500; color: var(--color-text-primary); }

.cert-other-ph i {
    font-style: normal;
    color: var(--color-text-placeholder);
}

/* On the cards with no tile grid the dropdown is the only picker, so its empty row
   is a one-line prompt instead. The greyed half above is what marks that row as
   "nothing chosen yet"; without it the prompt has to carry the colour itself. */
.cert-other-ph.cert-ph-prompt { color: var(--color-text-placeholder); }

/* ── Source language (Project Detail only) ───────────────── */
.cert-lang-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cert-lang-field > label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
}

/* ── Control row: type · pages · upload · remove ─────────── */
.cert-controls {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}

/* label + value in one inset pill, like the count pill on the form */
.cert-page-field {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--field-h);
    padding: 0 0 0 8px;
    background: var(--color-surface-inset);
    border-radius: var(--field-radius);
}

.cert-page-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Pages" — stands in for 'Certificate Page(s)' & co. once the row is too narrow
   for the full label. The document type is named directly above it, so nothing is
   lost; the input's aria-label still carries the long form. */
.cert-page-label-compact { display: none; }

.cert-modal-group-card .cert-page-input {
    width: 5ch;
    min-width: 5ch;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    -webkit-text-fill-color: var(--color-text-primary);
    opacity: 1;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.cert-modal-group-card .cert-upload-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--field-h);
    padding: 0 20px;
    border: none;
    border-radius: var(--field-radius);
    background: var(--color-brand-gold);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-surface-white);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.cert-modal-group-card .cert-upload-btn:hover:not(:disabled) {
    background: var(--color-brand-gold-hover);
    color: var(--color-surface-white);
}

.cert-modal-group-card .cert-upload-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cert-modal-group-card .cert-upload-btn .spinner-border {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.cert-remove-wrap {
    position: relative;          /* anchors the "Remove?" popover */
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.cert-modal-group-card .cert-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--field-h);
    height: var(--field-h);
    padding: 0;
    border: none;
    border-radius: var(--field-radius);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cert-modal-group-card .cert-remove-btn:hover:not(:disabled) {
    background: var(--color-status-danger-bg);
    color: var(--color-status-danger);
}

.cert-modal-group-card .cert-remove-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cert-modal-group-card .cert-remove-btn svg { width: 18px; height: 18px; }
.cert-modal-group-card .cert-remove-btn i { font-size: 16px; line-height: 1; }

/* ── Per-card dropzone ───────────────────────────────────── */
/* Reuses .wc-dropzone / .wc-dropzone-cta from the shared dropzone
   above; only the CERT-specific states are declared here. */
.cert-modal-group-card .wc-dropzone { gap: 0; }

/* Type-less: the panel is a hint, not a target. Files replace it
   entirely, so a locked card with a list shows no dropzone. */
.cert-modal-group-card.is-typeless .wc-dropzone {
    cursor: default;
    border-color: var(--color-border);
}

.cert-modal-group-card.is-typeless .wc-dropzone:hover { border-color: var(--color-border); }
.cert-modal-group-card.is-typeless .wc-dropzone .wc-dropzone-icon,
.cert-modal-group-card.is-typeless .wc-dropzone .cert-dz-live { display: none; }
.cert-modal-group-card:not(.is-typeless) .wc-dropzone .cert-dz-idle { display: none; }

.cert-modal-group-card.is-typeless .wc-dropzone-cta { padding: 40px 20px; }

/* files replace the dropzone — "Upload file(s)" adds the next one */
.cert-modal-group-card.is-locked .wc-dropzone { display: none; }

.cert-dz-idle {
    font-size: 15px;
    color: var(--color-text-placeholder);
    line-height: 1.5;
    margin: 0;
}

/* ── Driver's-licence note ───────────────────────────────── */
.cert-dl-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 12px 13.5px;
    margin: 8px 0;
    background: var(--color-surface-subtle);
    border: 0;
    border-radius: 24px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text-muted);
}

.cert-dl-note > svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    color: var(--color-text-primary);
}

.cert-dl-note .note__body {
    line-height: 1.5;
}


.cert-dl-note.is-done {
    background: var(--color-surface-inset);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* ── The card's file list ────────────────────────────────── */
.cert-card-files:empty { display: none; }
.cert-card-files:not(:has(.wc-file)) { display: none; }

/* the card's own gap already spaces the list from the row above it */
.cert-card-files.wc-files:has(li) { margin-bottom: 0; }

/* the temp row appendFileToUI() adds while a file is still uploading */
.cert-file-uploading {
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ── "Add another document" ──────────────────────────────── */
.cert-add-doc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 18px;
    background: none;
    border: 2px dashed var(--color-text-placeholder);
    border-radius: var(--field-radius);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast),
                color var(--transition-fast);
}

.cert-add-doc:hover {
    border-color: var(--color-brand-gold);
    background: var(--color-surface-gold-pale);
    color: var(--color-text-primary);
    text-decoration: none;
}

.cert-add-doc svg { width: 16px; height: 16px; }
.cert-add-doc i { font-size: 14px; line-height: 1; }

/* ── CERT field bridge ─────────────────────────────────────── */
.cert-modal-group-card .select2-container {
    width: 100% !important;
    min-width: 0;
}

.cert-modal-group-card .select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    height: var(--field-h) !important;
    min-height: var(--field-h) !important;
    padding: 0 42px 0 16px;
    background: var(--color-surface-inset) !important;
    border: none !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.cert-modal-group-card .select2-container .select2-selection--single:hover {
    background: var(--color-surface-subtle) !important;
}

.cert-modal-group-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0 30px 0 0 !important;
    line-height: normal !important;
    font-family: var(--font-body);
    font-size: 14px !important;
    color: var(--color-text-primary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-modal-group-card .select2-container--default.select2-container--open .select2-selection--single,
.cert-modal-group-card .select2-container--default.select2-container--focus .select2-selection--single {
    background: var(--color-surface-white) !important;
    border: none;
    box-shadow: var(--focus-ring-gold) !important;
}

.cert-modal-group-card .select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--color-surface-inset) !important;
    cursor: not-allowed;
}

.cert-modal-group-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    transition: transform var(--transition-fast);
    pointer-events: none;
}

.cert-modal-group-card .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.cert-modal-group-card .select2-container--open .select2-selection__arrow {
    transform: rotate(180deg) !important;
}

.cert-modal-group-card .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0'/%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E") !important;
}

.cert-lang-field select.native-select {
    background-color: var(--color-surface-inset);
    font-size: 14px;
}

.cert-lang-field select.native-select:hover:not(:disabled) {
    background-color: var(--color-surface-subtle);
}

.cert-lang-field select.native-select:disabled {
    color: var(--color-text-primary);
}

/* ── Footer scrolls with the document list ───────────────── */
/* A pinned footer reserves ~90px on every open. CERT is the one service whose body
   is a stack of tall cards, so it spends that on content instead: the whole dialog
   scrolls and Done sits at the end of the list. The header stays pinned — Close has
   to be one tap away however far down the user is. */
.wc-modal[data-wc-service-code="CERT"] .modal-content {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
}

.wc-modal[data-wc-service-code="CERT"] .modal-content::-webkit-scrollbar { width: 6px; }
.wc-modal[data-wc-service-code="CERT"] .modal-content::-webkit-scrollbar-track { background: transparent; }
.wc-modal[data-wc-service-code="CERT"] .modal-content::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: var(--radius-full);
}

/* the scroll moves up to .modal-content, so the body stops being its own scrollport */
.wc-modal[data-wc-service-code="CERT"] .wc-body {
    max-height: none;
    overflow: visible;
}

.wc-modal[data-wc-service-code="CERT"] .wc-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 599.98px) {
    .cert-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
    /* The row still has to stay on one line, and side by side the count pill, a
       spelled-out "Upload file(s)" and the bin don't fit. So the count's label
       climbs out of the pill and sits above it: the pill shrinks to just the
       number, and the width that frees up goes to the button's caption. */
    .cert-controls { align-items: flex-end; }

    .cert-page-field {
        gap: 4px;
    }

    .cert-page-label { display: none; }

    .cert-page-label-compact {
        display: block;
        font-size: 12px;
        line-height: 1.2;
        color: var(--color-text-secondary);
        white-space: nowrap;
        overflow: visible;
        text-overflow: ellipsis;
    }

    /* the pill moves off the wrapper and onto the input itself */
    .cert-modal-group-card .cert-page-input {
        width: 100%;
        min-width: 0;
        height: var(--field-h);
        padding: 0;
        background: var(--color-surface-inset);
        border-radius: var(--field-radius);
        text-align: center;
    }

    /* min-width:0 over the nowrap caption: if a very narrow phone still can't fit
       it, the caption clips rather than shoving the bin onto a second line. */
    .cert-modal-group-card .cert-upload-btn {
        min-width: 0;
        padding: 0 12px;
        font-size: 14px;
        overflow: hidden;
    }
}

@media (max-width: 419.98px) {
    .cert-modal-group-card { padding: 14px; }
    .cert-type-grid { grid-template-columns: minmax(0, 1fr); }

    .cert-modal-group-card .cert-quick-pick {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
    }

    .cert-modal-group-card .cert-upload-btn {
        padding: 0 10px;
        font-size: 13px;
    }

    .cert-remove-wrap { margin-left: 0; }

    /* tally moves under the name; the icon and the chevron stay centred against
       the pair, so the row still reads as one line of content */
    .cert-summary-text {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .cert-summary-meta {
        font-size: 12px;
        gap: 6px;
    }

    .cert-summary-meta > span + span::before { margin-right: 6px; }
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes wc-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* the "Remove?" popover rises out of the button it opened from —
   or drops out of it, on the one row that opens downward */
@keyframes wc-confirm-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes wc-confirm-in-down {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes wc-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(285%); }
}

@keyframes wc-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@keyframes wc-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes wc-saved {
    0%   { background: var(--color-surface-white); }
    100% { background: var(--color-surface-gold-pale); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .wc-modal-container { padding-inline: 0; }

    .wc-modal .modal-dialog {
        margin: 8px;
        max-width: none;
    }

    .wc-header, .wc-body, .wc-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wc-body { max-height: 60vh; max-height: 60dvh; }

    .wc-file {
        gap: 10px;
        padding: 12px;
    }

    /* doc type + count drop to their own line under the file name */
    .wc-file-count {
        order: 1;
        flex-basis: 100%;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        text-align: left;
    }

    .wc-file-doctype { max-width: 55%; }

    /* the edit controls get a line of their own too, so the file
       name isn't squeezed down to two characters */
    .wc-file-edit {
        order: 1;
        flex-basis: 100%;
        justify-content: flex-end;
    }

    .wc-edit-label { display: none; }
    .wc-input { width: 96px; }
    /* On a phone the edit row already wraps to its own line; let the
       select take the width it needs there rather than keeping a
       desktop minimum that would force a second wrap. */
    .wc-edit-doctype { min-width: 0; flex: 1 1 auto; max-width: none; }


    .wc-dropzone { padding: 16px; }
    .wc-dropzone-field .wc-label { flex-basis: 100%; }
    .wc-dropzone-field .wc-select,
    .wc-dropzone-field .select2-container { flex-basis: 100%; }
    .wc-dropzone-cta { padding: 22px 14px; }
    .wc-dropzone-title { font-size: 15px; }

    .wc-stats { gap: 8px; }
    .wc-stat { padding: 12px 10px; }
    .stat-value { font-size: 19px; }
    .wc-stat-label { font-size: 12px; }

    /* On a phone the primary action is worth the full row; above that it stays
       fit-content and right-aligned (see .wc-btn-primary). */
    .wc-btn-primary {
        width: 100%;
        margin-left: 0;
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wc-modal *,
    .wc-modal *::before,
    .wc-modal *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .wc-progress-bar {
        animation: none !important;
        width: 100%;
        opacity: 0.5;
    }
}

/* ── the dropzone's own pickers must never wrap ───────────── */
/* Two of them share this line on the Project Detail popup (Source Language
   and Subject), each `flex: 1 1 160px`, so each is already close to its
   basis. Opening a row's edit box makes the popup taller, the body gains a
   scrollbar, the row loses those few pixels - and a long value like
   "General Business" broke onto a second line, which grew the control and
   pushed the whole field row out of shape.

   Stated for all three skins the control can wear, because which one it gets
   depends on the page: the bare .wc-select, the native-select theme (whose
   `display:flex; flex-wrap:wrap` is what actually let the text wrap), and
   select2's rendered label. */
.wc-dropzone-field .wc-select,
.wc-dropzone-field select.native-select,
.wc-dropzone-field .select2-selection__rendered {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── select2 on the row's document type ──────────────────── */
/* Matches the width the native control had, and stops the replacement being
   the one thing in the row that can grow without limit. */
.wc-file-edit .select2-container {
    max-width: 230px;
    flex: 0 1 auto;
}

/* select2-theme.css sizes every single-select to --field-h (48px) with
   !important, which is right for a form field and wrong inside this row: the
   count input beside it is 36px, and a 48px control next to it makes the row
   jump taller the moment Edit is pressed. Overridden here, scoped to the edit
   box, and with !important only because the theme's own rule carries one. */
.wc-file-edit .select2-container .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
}

/* The label needs nothing: the theme's shell is `display:flex;
   align-items:center`, so it centres itself.

   The url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 16px 16px does, and it has to be re-declared rather than adjusted. Every
   context in this stylesheet that hosts a select2 already does the same -
   .wc-dropzone-field and .cert-modal-group-card both restate it - because the
   centring is `top: 50%` against a hard-coded height and a margin-top of minus
   half that height. Inherit one of those and the arrow is centred for a
   DIFFERENT height than the shell it is in: this row's shell is 36px, it was
   picking up a 30px arrow, and the chevron sat nine pixels low.

   16px with -8px matches the other two, so all three read the same. */
.wc-file-edit .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    transition: transform var(--transition-fast);
    pointer-events: none;
}

.wc-file-edit .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.wc-file-edit .select2-container--open .select2-selection__arrow {
    transform: rotate(180deg) !important;
}

/* the shell's own padding, rebalanced for the 36px height and the 12px inset
   the chevron now sits at */
.wc-file-edit .select2-container .select2-selection--single {
    padding: 0 34px 0 12px;
}

/* ── the edit box, when it carries the document type ──────── */
/* .wc-file-edit is `margin-left: auto` so the count-only editor sits at the
   right-hand end of the row, where it lines up under the actions it replaces.
   With a Subject picker in it that left the control bunched against the right
   edge with the whole width of the row empty beside it.

   Given its own full line instead - .wc-file already wraps - anchored left,
   with the picker taking the slack. The modifier is set by the template only
   when the dropdown is actually rendered, so CERT's count-only box keeps the
   old placement. */
.wc-file-edit--wide {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
    min-width: 0;
}

/* min-width:0 on the growing child as well: a flex item will not shrink below
   its content by default, and the longest subject name is wider than the room
   there is on a narrow popup. */
.wc-file-edit--wide .wc-edit-doctype,
.wc-file-edit--wide .select2-container {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}