/**
 * 21C Systems — Auth front-end styles.
 *
 * Scoped under .c21-auth-app. Token names match the proven Frontend Styler
 * convention (--auth-*) so a future theming module can override them.
 */

:root {
    --auth-color-primary: #2563eb;
    --auth-color-primary-hover-bg: #1d4ed8;
    --auth-color-primary-hover-text: #ffffff;
    --auth-color-primary-border: #1e40af;
    --auth-primary-radius: var(--auth-radius);
    --auth-color-success: #15803d;
    --auth-color-danger: #b91c1c;
    --auth-color-error: var(--auth-color-danger);
    --auth-color-warning: #b45309;
    --auth-color-info: #1d4ed8;
    --auth-alert-font-size: 1rem;
    --auth-alert-font-weight: 400;
    --auth-color-border: #d1d5db;
    --auth-color-text: #111827;
    --auth-color-muted: #6b7280;
    --auth-color-surface: #ffffff;
    --auth-color-on-primary: #ffffff;
    --auth-color-secondary-bg: #f3f4f6;
    --auth-color-secondary-hover-bg: #e5e7eb;
    --auth-color-secondary-hover-text: #111827;
    --auth-color-secondary-text: #111827;
    --auth-color-secondary-border: #d1d5db;
    --auth-secondary-radius: var(--auth-radius);
    /* Ask AI button — independent of secondary button tokens (same defaults). */
    --auth-ask-ai-bg: #f3f4f6;
    --auth-ask-ai-hover-bg: #e5e7eb;
    --auth-ask-ai-hover-text: #111827;
    --auth-ask-ai-text: #111827;
    --auth-ask-ai-border: #d1d5db;
    --auth-ask-ai-radius: 6px;
    --auth-button-padding-y: 0.6rem;
    --auth-button-padding-x: 1.1rem;
    --auth-button-font-weight: 600;
    --auth-radius: 6px;
    --auth-spacing: 1rem;
    --auth-control-stack-gap: 1rem;
    --auth-max-width: 28rem;
    --auth-field-section-border-width: 1px;
    --auth-field-section-border-color: #d1d5db;
    --auth-field-section-bg: #f9fafb;
    --auth-field-section-radius: 8px;
    --auth-field-section-padding: 0.75rem;

    /* Media capture-item / card grid (Frontend Styler subset) */
    --auth-capture-item-bg: #ffffff;
    --auth-capture-item-border-color: #d1d5db;
    --auth-capture-item-border-width: 1px;
    --auth-capture-item-radius: 12px;
    --auth-capture-item-padding: 0.75rem;
    --auth-capture-item-gap: 0.75rem;
    --auth-capture-item-spacing: 0.75rem;
    --auth-capture-item-min-width: 280px;
    --auth-document-icon-size: 7rem;
    --auth-document-filename-font-size: 1.125rem;
    --auth-document-filename-margin-above: 0.5rem;
    --auth-document-filename-margin-below: 0;
    --auth-short-description-gap-above: 0.4rem;
    --auth-short-description-gap-below: 0.4rem;
    --cs-media-card-bg: #F8F9FB;
    --cs-media-card-border-colour: #000000;
    --cs-media-card-border-width: 1px;
    --cs-media-card-radius: 30px;
    --cs-media-card-padding: 30px;
    --cs-media-card-shadow: none;
    --cs-media-card-meter-height: 8px;
    --cs-media-card-meter-player-spacing: 2px;
    --cs-media-card-player-bottom-spacing: 8px;
}

/* Light theme-bleed reset inside Auth UI */
.c21-auth-app,
.c21-auth-app *,
.c21-auth-app *::before,
.c21-auth-app *::after {
    box-sizing: border-box;
}


.c21-auth-app h1,
.c21-auth-app h2,
.c21-auth-app h3,
.c21-auth-app h4,
.c21-auth-app p,
.c21-auth-app ul,
.c21-auth-app ol,
.c21-auth-app li,
.c21-auth-app figure,
.c21-auth-app figcaption,
.c21-auth-app blockquote,
.c21-auth-app dl,
.c21-auth-app dd,
.c21-auth-app section,
.c21-auth-app article,
.c21-auth-app header,
.c21-auth-app footer,
.c21-auth-app nav {
    margin: 0;
    padding: 0;
}


.c21-auth-app button {
    margin: 0;
    padding: 0;
    font: inherit;
    border: none;
}


.c21-auth-records {
    margin: 0 auto;
}

/* Front-end Record Type Explainer — space below content before the next box. */
.c21-auth-explainer {
    display: block;
    box-sizing: border-box;
    padding-bottom: 2rem;
}

.c21-auth-explainer > *:last-child {
    margin-bottom: 0;
}


.c21-auth-form {
    display: grid;
}


.c21-auth-field-section {
    display: grid;
    width: 100%;
}


/* Record Add/Edit/View/Public form sections — shared .c21-auth-field-section wrapper */
.c21-auth-records .c21-auth-form > .c21-auth-field-section {
    margin-top: 0;
    margin-bottom: 0;
}


.c21-auth-label {
    margin: 0;
}


/*
 * Field label row (regular admin fields + media slots).
 * Labels live in a flex cluster so Ask AI can sit beside them. Flex items
 * default to content width — then inherited text-align from Field Blocks
 * (.c21-surface--section) has nothing to do and looks like a no-op.
 * Stretch the label to the row width so section text-align matches Help.
 */
.c21-auth-app .c21-auth-label-row,
.c21-auth-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: 100%;
    box-sizing: border-box;
}

.c21-auth-app .c21-auth-label-row > .c21-label,
.c21-auth-label-row > .c21-label {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}


.c21-auth-app .c21-auth-input,
.c21-auth-app input.c21-auth-input,
.c21-auth-input {
    width: 100%;
}


/* Beat .c21-auth-app button {
    padding: 0;
}
 (0,1,1): use .c21-auth-app .c21-btn (0,2,0).
 * Variant colour rules below must match or exceed this specificity. */
.c21-auth-app .c21-btn,
button.c21-btn,
a.c21-btn,
.c21-btn {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    transition: none;
}


.c21-auth-app .c21-btn:hover,
.c21-auth-app .c21-btn:focus,
.c21-btn:hover,
.c21-btn:focus {
    text-decoration: none;
    transition: none;
}


/* The hidden attribute must win over component display rules (e.g.
   .c21-btn {
    display: inline-block;
}
, .auth-media-capture {
    display: grid;
}
)
   so capture controls stay hidden until their state applies. */
.c21-btn[hidden],
[hidden] {
    display: none !important;
}


.c21-auth-app .c21-btn--primary:hover,
.c21-auth-app .c21-btn--primary:focus,
.c21-auth-app button.c21-btn--primary:hover,
.c21-auth-app button.c21-btn--primary:focus,
button.c21-btn.c21-btn--primary:hover,
button.c21-btn.c21-btn--primary:focus,
.c21-btn--primary:hover,
.c21-btn--primary:focus {
    text-decoration: none;
    transition: none;
    filter: none;
}


.c21-auth-app a.c21-btn,
a.c21-btn,
a.c21-btn:link,
a.c21-btn:visited,
a.c21-btn:active {
    text-decoration: none;
    transition: none;
    filter: none;
    opacity: 1;
}


.c21-auth-app a.c21-btn:hover,
.c21-auth-app a.c21-btn:focus,
a.c21-btn:hover,
a.c21-btn:focus {
    text-decoration: none;
    transition: none;
    filter: none;
    opacity: 1;
}


.c21-auth-app .c21-btn--secondary:hover,
.c21-auth-app .c21-btn--secondary:focus,
.c21-auth-app button.c21-btn--secondary:hover,
.c21-auth-app button.c21-btn--secondary:focus,
button.c21-btn.c21-btn--secondary:hover,
button.c21-btn.c21-btn--secondary:focus,
.c21-btn--secondary:hover,
.c21-btn--secondary:focus {
    text-decoration: none;
    transition: none;
}


/* At-capacity acquire controls (aria-disabled — still clickable for feedback).
   Placed after hover resets so filter/opacity are not wiped. */
.c21-auth-app .c21-btn:disabled,
.c21-auth-app button.c21-btn:disabled,
button.c21-btn:disabled,
.c21-btn:disabled,
.c21-auth-app .c21-btn[aria-disabled="true"],
.c21-auth-app button.c21-btn[aria-disabled="true"],
button.c21-btn[aria-disabled="true"],
.c21-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.25);
    box-shadow: none;
}

.c21-auth-app .c21-btn:disabled:hover,
.c21-auth-app .c21-btn:disabled:focus,
.c21-auth-app button.c21-btn:disabled:hover,
.c21-auth-app button.c21-btn:disabled:focus,
button.c21-btn:disabled:hover,
button.c21-btn:disabled:focus,
.c21-btn:disabled:hover,
.c21-btn:disabled:focus,
.c21-auth-app .c21-btn--primary:disabled:hover,
.c21-auth-app .c21-btn--primary:disabled:focus,
.c21-auth-app .c21-btn--secondary:disabled:hover,
.c21-auth-app .c21-btn--secondary:disabled:focus,
button.c21-btn.c21-btn--primary:disabled:hover,
button.c21-btn.c21-btn--primary:disabled:focus,
button.c21-btn.c21-btn--secondary:disabled:hover,
button.c21-btn.c21-btn--secondary:disabled:focus,
.c21-auth-app .c21-btn[aria-disabled="true"]:hover,
.c21-auth-app .c21-btn[aria-disabled="true"]:focus,
.c21-auth-app button.c21-btn[aria-disabled="true"]:hover,
.c21-auth-app button.c21-btn[aria-disabled="true"]:focus,
button.c21-btn[aria-disabled="true"]:hover,
button.c21-btn[aria-disabled="true"]:focus,
.c21-btn[aria-disabled="true"]:hover,
.c21-btn[aria-disabled="true"]:focus,
.c21-auth-app .c21-btn--primary[aria-disabled="true"]:hover,
.c21-auth-app .c21-btn--primary[aria-disabled="true"]:focus,
.c21-auth-app .c21-btn--secondary[aria-disabled="true"]:hover,
.c21-auth-app .c21-btn--secondary[aria-disabled="true"]:focus,
button.c21-btn.c21-btn--primary[aria-disabled="true"]:hover,
button.c21-btn.c21-btn--primary[aria-disabled="true"]:focus,
button.c21-btn.c21-btn--secondary[aria-disabled="true"]:hover,
button.c21-btn.c21-btn--secondary[aria-disabled="true"]:focus {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.25);
    text-decoration: none;
}


.auth-form__checkbox-label {
    /* Layout when .c21-label is also present is owned by c21-primitives.css. */
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
}


.auth-form__checkbox {
    flex-shrink: 0;
}


.auth-form__radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}


/* Structural only — colour/weight/margins owned by .c21-meta--needed (CSS Styler). */
.auth-asset-description-needed {
    display: block;
}


.auth-capture-item__description-slot > .auth-asset-description-needed[hidden] {
    display: none !important;
}


.auth-asset-description-field {
    display: grid;
    gap: 0.5rem;
}


.auth-asset-description-field[hidden] {
    display: none !important;
}


/* Password strength line under Register / Reset password.
 * Must beat Styler .c21-alert { border… !important } (same specificity otherwise). */
.c21-alert.c21-alert--meter,
.c21-auth-password-strength {
    display: block;
    min-height: 0;
    margin: 0.35rem 0 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.c21-auth-password-strength:empty {
    display: none;
}


.auth-media-capture__preview,
.auth-media-capture__playback {
    display: block;
    max-width: 100%;
    height: auto;
}


.auth-media-capture__preview,
.auth-media-capture__playback[controls] {
    width: 100%;
    max-width: 100%;
}


.auth-media-capture__preview--mirror {
    transform: scaleX(-1);
}


.auth-media-capture__playback {
    width: 100%;
    max-width: 100%;
}


.auth-media-capture {
    display: grid;
    /* Space between the recorder/media card and Start|Stop|Cancel row. */
    gap: 2rem;
}

/* Singular capture card while session upload after Stop is in flight / failed. */
.c21-auth-capture-item[data-upload-state='pending'] .auth-capture-item__media {
    opacity: 0.92;
}

.c21-auth-capture-item[data-upload-state='error'] .auth-capture-item__media {
    opacity: 1;
}


.auth-media-capture__timer {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1c1830;
    text-align: left;
}


.auth-media-capture__status {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #3d3758;
    text-align: left;
}


.auth-media-capture__status.auth-warning,
.auth-media-capture__status.auth-error,
.auth-media-capture__status.auth-info,
.auth-media-capture__status.auth-success {
    /* Match shared notice spacing token (--auth-spacing) used by .auth-warning etc. */
    margin-top: var(--auth-spacing);
}


/* =============================================================================
 * Media card shell (cs-media-card)
 * ============================================================================= */

.c21-auth-app .c21-media-card,
.c21-media-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}


.cs-media-card__playback {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: none;
    padding: 0;
    margin: 0;
}


.auth-audio-capture__meter {
    margin: 0;
    width: 100%;
}


.auth-audio-capture__meter[hidden] {
    display: none !important;
}


/* Keep the player tight under the live level bar. */
.auth-audio-capture__meter + audio,
.auth-audio-capture__meter + .auth-audio-capture-record__review-audio,
.auth-audio-capture__meter + .auth-audio-capture-preview__audio,
.auth-audio-capture__meter + .auth-my-ai__primary-audio,
.cs-media-card__playback .auth-audio-capture__meter + audio,
.cs-media-card__playback .auth-audio-capture__meter + .auth-audio-capture-record__review-audio,
.cs-media-card__playback .auth-audio-capture__meter + .auth-audio-capture-preview__audio,
.cs-media-card__playback .auth-audio-capture__meter + .auth-my-ai__primary-audio,
.c21-media-card .auth-audio-capture__meter + audio {
    margin-top: var(--cs-media-card-meter-player-spacing, 2px);
}


.c21-media-card .auth-audio-capture__meter-track,
.auth-audio-capture__meter-track {
    height: 8px;
    background: #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}


.auth-audio-capture__meter-bar {
    display: block;
    height: 100%;
    width: 0;
    background: #2563eb;
    transition: width 0.05s linear;
}


.auth-audio-capture__meter--recording .auth-audio-capture__meter-bar {
    background: #b91c1c;
}


.auth-gallery-capture__items > .c21-auth-capture-item.is-dragging {
    opacity: 0.55;
}

/*
 * Gallery image-editor full-width takeover (not primary_image).
 * Editing li spans the whole .auth-gallery-capture__items grid so tools
 * are not squeezed into a single auto-fill column; siblings stay in normal
 * cells and are dimmed via .is-image-edit-sibling-locked.
 */
.auth-gallery-capture__items > .c21-auth-capture-item.is-image-editing,
.auth-gallery-capture__items > .auth-gallery-capture__item.is-image-editing {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.auth-gallery-capture__items > .c21-auth-capture-item.is-image-editing > [data-21csystems-image-editor-root],
.auth-gallery-capture__items > .auth-gallery-capture__item.is-image-editing > [data-21csystems-image-editor-root] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.auth-gallery-capture__items > .c21-auth-capture-item.is-image-editing .c21-image-editor:not([hidden]),
.auth-gallery-capture__items > .auth-gallery-capture__item.is-image-editing .c21-image-editor:not([hidden]) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.auth-gallery-capture__items > .c21-auth-capture-item.is-image-edit-sibling-locked,
.auth-gallery-capture__items > .auth-gallery-capture__item.is-image-edit-sibling-locked {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

.auth-gallery-capture__items > .c21-auth-capture-item.is-image-edit-sibling-locked .auth-gallery-capture__remove:disabled,
.auth-gallery-capture__items > .auth-gallery-capture__item.is-image-edit-sibling-locked .auth-gallery-capture__remove:disabled,
.auth-gallery-capture__items > .c21-auth-capture-item.is-image-edit-sibling-locked [data-21csystems-edit-image]:disabled,
.auth-gallery-capture__items > .auth-gallery-capture__item.is-image-edit-sibling-locked [data-21csystems-edit-image]:disabled {
    cursor: not-allowed;
}

.auth-gallery-capture__reorder {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--auth-color-muted, #d1d5db);
}

.auth-gallery-capture__reorder[hidden] {
    display: none !important;
}

.c21-auth-app .auth-gallery-capture__reorder-heading {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--auth-color-muted, #6b7280);
}

.auth-gallery-capture__reorder-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.auth-gallery-capture__reorder-handle,
.auth-gallery-capture__move-up,
.auth-gallery-capture__move-down {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    margin: 0;
    line-height: 1.2;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #1c1830;
    background-color: #f3f0ff;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    border-radius: 0.75rem;
    appearance: none;
    -webkit-appearance: none;
}

.auth-gallery-capture__reorder-icon,
.auth-gallery-capture__reorder-label {
    display: inline-block;
    line-height: 1;
}

.auth-gallery-capture__reorder-handle {
    cursor: grab;
    user-select: none;
}

.auth-gallery-capture__move-up,
.auth-gallery-capture__move-down {
    cursor: pointer;
}

.auth-gallery-capture__reorder-handle:hover,
.auth-gallery-capture__reorder-handle:focus,
.auth-gallery-capture__move-up:hover,
.auth-gallery-capture__move-up:focus,
.auth-gallery-capture__move-down:hover,
.auth-gallery-capture__move-down:focus {
    color: #1c1830;
    background-color: #e8e2ff;
}

.auth-gallery-capture__reorder-handle:active {
    cursor: grabbing;
}

.auth-gallery-capture__move-up:disabled,
.auth-gallery-capture__move-down:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* =============================================================================
 * Capture-item grid + cards
 * ============================================================================= */

.c21-auth-app .auth-capture-item-grid,
.c21-auth-app .auth-my-ai__gallery-capture .auth-gallery-capture__items,
.auth-capture-item-grid,
.auth-gallery-capture__items {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, var(--auth-capture-item-min-width, 280px)), 1fr)
    );
    gap: var(--auth-capture-item-spacing, 0.75rem);
    align-items: start;
}


@media (max-width: 480px) {
    .c21-auth-app .auth-capture-item-grid,
    .c21-auth-app .auth-my-ai__gallery-capture .auth-gallery-capture__items,
    .auth-capture-item-grid,
    .auth-gallery-capture__items {
    grid-template-columns: 1fr;
}

}

/* Index browse grid (usage_mode=index view="grid") — same minmax pattern as capture grids */
.c21-auth-app .c21-auth-records-grid,
.c21-auth-records-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, var(--auth-capture-item-min-width, 280px)), 1fr)
    );
    align-items: start;
}


.c21-auth-records-grid__media-link {
    display: block;
    text-decoration: none;
}


.c21-auth-records-grid__placeholder {
    min-height: 10rem;
}


@media (max-width: 480px) {
    .c21-auth-app .c21-auth-records-grid,
    .c21-auth-records-grid {
    grid-template-columns: 1fr;
}

}

/* Hide Audio/Video (singular) grid shell when its only card is not shown yet. */
.auth-capture-item-grid:not(:has(.c21-auth-capture-item:not([hidden]))) {
    display: none;
    margin: 0;
}


/* Gallery items list: no grid chrome until at least one item exists. */
.auth-gallery-capture__items:not(:has(.c21-auth-capture-item)) {
    display: none;
    margin: 0;
}


.auth-document-capture-file-input--hidden {
    position: absolute;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.c21-auth-app .auth-document-capture__file,
.auth-document-capture__file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}


.auth-capture-item__media > .auth-document-capture__file,
.auth-capture-item__media .auth-document-capture__file {
    width: 100%;
    align-self: stretch;
}


/* Document type icon plate (text fallback today; SVG wiring later). */
.c21-auth-app .auth-document-capture__icon,
.auth-document-capture__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--auth-document-icon-size, 7rem);
    height: var(--auth-document-icon-size, 7rem);
    max-width: 100%;
    margin: 0 auto;
    padding: calc(var(--auth-document-icon-size, 7rem) * 0.12);
    border: var(--auth-capture-item-border-width, 1px) solid var(--auth-capture-item-border-color, var(--auth-color-border, #d1d5db));
    border-radius: var(--auth-capture-item-radius, var(--auth-radius, 6px));
    background: var(--auth-capture-item-bg, var(--auth-color-surface, #ffffff));
    color: var(--auth-color-text, #111827);
    box-sizing: border-box;
}


.auth-document-capture__icon-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}


.auth-document-capture__icon--pdf {
    color: #b91c1c;
    border-color: color-mix(in srgb, #b91c1c 35%, var(--auth-color-border, #d1d5db));
}


.auth-document-capture__icon--doc,
.auth-document-capture__icon--docx {
    color: #1d4ed8;
    border-color: color-mix(in srgb, #1d4ed8 35%, var(--auth-color-border, #d1d5db));
}


.auth-document-capture__icon--txt {
    color: #374151;
}


.auth-document-capture__icon--rtf,
.auth-document-capture__icon--odt,
.auth-document-capture__icon--generic {
    color: var(--auth-color-muted, #6b7280);
}


.auth-document-capture__icon-fallback {
    font-size: calc(var(--auth-document-icon-size, 7rem) * 0.22);
    font-weight: var(--auth-button-font-weight, 600);
    letter-spacing: 0.04em;
    line-height: 1.2;
}


.c21-auth-app .auth-document-capture__filename,
.auth-document-capture__filename {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: var(--auth-document-filename-margin-above, 0.5rem);
    margin-right: auto;
    margin-bottom: var(--auth-document-filename-margin-below, 0);
    margin-left: auto;
    padding: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--auth-color-text, #111827);
    font-size: var(--auth-document-filename-font-size, 1.125rem);
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}


.c21-auth-app .c21-auth-capture-item,
.c21-auth-capture-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
}


.auth-capture-item__footer {
    display: contents;
}


.auth-capture-item__media,
.auth-capture-item__description-slot {
    display: block;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Capture-card footer row: width in the card layout; flex/gap from .c21-cluster. */
.auth-capture-item__actions,
.c21-auth-capture-item .c21-auth-media-item-actions {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


.auth-capture-item__description-slot {
    min-height: 1.5em;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
}

/*
 * View mode: space static “Description:” / “required” reminder from media above
 * and the action row below. Hardcoded (not a Styler field). Skipped while the
 * inline editor is open so edit-mode spacing is owned by one rule only.
 */
.auth-capture-item__description-slot:has(
    > .auth-capture-item__description:not([hidden]),
    > .auth-asset-description-needed:not([hidden])
):not(:has(> .auth-asset-description-field:not([hidden]))) {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*
 * Edit mode: keep the slot clear of the media above; put 1rem under the input
 * so Save / Cancel (in .auth-capture-item__actions) are not flush against it.
 */
.auth-capture-item__description-slot:has(> .auth-asset-description-field:not([hidden])) {
    margin-top: 1rem;
}

.auth-capture-item__description-slot > .auth-asset-description-field:not([hidden]) {
    margin-bottom: 1rem;
}


.auth-capture-item__description-slot > p.auth-capture-item__description {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}


.auth-capture-item__media .auth-gallery-capture__thumb,
.c21-auth-capture-item .auth-gallery-capture__thumb {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}


.auth-capture-item__media video.auth-my-ai__primary-video,
.auth-capture-item__media .auth-media-capture__preview,
.auth-capture-item__media .auth-media-capture__playback[controls] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.auth-video-placeholder {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: #1c1830;
    cursor: pointer;
    overflow: hidden;
}

.auth-video-placeholder__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.auth-video-placeholder__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4.5rem;
    height: 4.5rem;
    margin: -2.25rem 0 0 -2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.auth-video-placeholder__play::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.7rem 0 0 -0.35rem;
    border-style: solid;
    border-width: 0.7rem 0 0.7rem 1.15rem;
    border-color: transparent transparent transparent #ffffff;
}


.auth-capture-item__media audio.auth-my-ai__primary-audio,
.auth-capture-item__media .auth-media-capture__playback {
    display: block;
    width: 100%;
    max-width: 100%;
}


.c21-auth-capture-item .c21-btn {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    align-self: center;
    margin: 0;
}


@media (max-width: 480px) {
    .c21-auth-capture-item .c21-btn {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
}


[data-21csystems-acquire][hidden],
.c21-auth-media-slot > [data-21csystems-acquire][hidden] {
    display: none !important;
}


/*
 * Space Upload / Record (acquire row) away from capture-item card(s) above.
 * Hardcoded (not a Styler field). Only when at least one card is shown —
 * empty slots keep the buttons tight under help/label.
 * Distinct from Media Gallery Card Grid Gap (between cards inside the grid).
 */
.c21-auth-media-slot:has(
    .auth-capture-item-grid .c21-auth-capture-item:not([hidden])
) > [data-21csystems-acquire],
.c21-auth-media-slot:has(
    .auth-gallery-capture__items > .c21-auth-capture-item
) > [data-21csystems-acquire] {
    margin-top: 1rem;
}


/*
 * Primary Image preview size — Styler Images category owns max-width
 * (Index Edit / Index View). Fallback matches prior hardcoded behaviour
 * until Styler CSS loads. Grid column fills the constrained width.
 */
.c21-auth-app .c21-auth-media-slot[data-21csystems-media-slot="primary_image"] .auth-capture-item-grid,
.c21-auth-media-slot[data-21csystems-media-slot="primary_image"] .auth-capture-item-grid {
    width: 100%;
    max-width: 840px;
    grid-template-columns: minmax(0, 1fr);
}


.c21-auth-records--view .auth-capture-item-grid:has([data-21csystems-media-slot="primary_image"]) {
    width: 100%;
    max-width: 100%;
    /* One column — auto-fill would leave a single card stuck at ~280px track width. */
    grid-template-columns: minmax(0, 1fr);
}


.c21-auth-app .c21-auth-media-slot[data-21csystems-media-slot="primary_image"] .auth-gallery-capture__thumb,
.c21-auth-media-slot[data-21csystems-media-slot="primary_image"] .auth-gallery-capture__thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* Edit/Add form: space between Save and the Back link (Link Set 3). */
.c21-auth-records--form > .c21-link-list.c21-auth-form-links {
    margin-top: 2rem;
}

/* Record View: space above the Back link (Link Set 3). Separate from form. */
.c21-auth-records--view > .c21-link-list.c21-auth-form-links {
    margin-top: 2rem;
}


/*
 * Auth pages (Link Set 1): 2rem above related-link groups —
 * Forgot/Resend/Status (below panel) and Login (below submit, inside form).
 * Does not target record Index/View/Grid (those use .c21-auth-records).
 */
.c21-auth-app:not(.c21-auth-records) > .c21-link-list.c21-auth-form-links,
.c21-auth-app:not(.c21-auth-records) .c21-auth-form > .c21-link-list.c21-auth-form-links {
    margin-top: 2rem;
}


.auth-records__toolbar {
    margin-bottom: 2rem;
}


.auth-records__table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.auth-records__table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    background: transparent;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
}


/* Thumb | Title | Created | Status | Actions — Title takes leftover; Actions shrinks. */
.auth-records__table th:nth-child(1),
.auth-records__table td:nth-child(1) {
    width: 1%;
}


.auth-records__table th:nth-child(2),
.auth-records__table td:nth-child(2) {
    width: auto;
}


.auth-records__table th:nth-child(5),
.auth-records__table td:nth-child(5) {
    width: 1%;
    white-space: nowrap;
}


/* Keep View/Edit/Delete on one line; do not change shared .c21-link-list--inline elsewhere. */
.auth-records__table td:nth-child(5) .c21-link-list--inline {
    flex-wrap: nowrap;
    margin-top: 0;
}


.auth-records__thumb-cell {
    line-height: 0;
}


.auth-records__thumb-heading {
    width: 2.5rem;
}


/* Column-header sort (Created / Status) — not media Up/Down reorder controls. */
.auth-records__sort-th {
    white-space: nowrap;
}

.auth-records__sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: inherit;
    text-decoration: none;
    font: inherit;
    font-weight: inherit;
}

.auth-records__sort-link:hover,
.auth-records__sort-link:focus {
    text-decoration: underline;
}

.auth-records__sort-indicator {
    font-size: 0.75em;
    line-height: 1;
    opacity: 0.85;
}

.auth-records__sort-th.is-sorted .auth-records__sort-label {
    text-decoration: underline;
}


.auth-records__thumb {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    object-fit: cover;
    background: #e5e7eb;
}


.auth-records__thumb--empty {
    background: #e5e7eb;
}


.auth-records__table th,
.auth-records__table td {
    vertical-align: top;
    padding: 0.5rem;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
}


.auth-records__table td {
    vertical-align: middle;
}


.auth-records__table th {
    color: #1c1830;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
}


.auth-records__locked {
    display: inline-block;
}


.auth-records__delete-form {
    display: inline;
    margin: 0;
}


.auth-records__delete-button {
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
}

.auth-records__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 1.25rem;
    font-size: 1rem;
}

.auth-records__pagination-link {
    text-decoration: underline;
}

.auth-records__pagination-link.is-disabled,
.auth-records__pagination-link[aria-disabled="true"] {
    cursor: default;
    text-decoration: none;
    pointer-events: none;
}


.c21-profile-visibility label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}


/*
 * Showcased Work only — collapse dead wrappers between intro and Add collection.
 * :empty fails when the collections div has whitespace text nodes; :has() is reliable.
 */
.c21-profile-showcase > .c21-help,
.c21-profile-showcase > .c21-auth-help {
    margin-bottom: 0;
}

.c21-profile-showcase > .c21-profile-showcase__picker[hidden],
.c21-profile-showcase > .c21-profile-showcase__collections:not(:has([data-c21-showcase-collection])) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.c21-profile-showcase > .c21-profile-showcase__add {
    margin: 0.35rem 0 0;
}

.c21-profile-showcase__results {
    display: grid;
    grid-template-columns: repeat(auto-fill, 6.5rem);
    gap: 0.75rem;
    justify-content: start;
}

.c21-profile-showcase-card {
    display: grid;
    gap: 0.35rem;
    max-width: 6.5rem;
}

.c21-profile-showcase-card.is-draft {
    opacity: 0.85;
}

/* Edit UI only — picker search cards stay fixed-size; collection items use gallery grid. */
.c21-profile-showcase .c21-profile-showcase-card-thumb {
    width: 6.5rem;
    max-width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 0;
}

.c21-profile-showcase .c21-profile-showcase-card-thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Collection item thumbs fill gallery capture cards (same as gallery media). */
.c21-profile-showcase .auth-gallery-capture__items .c21-profile-showcase__thumb {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    background: rgba(0, 0, 0, 0.04);
}

.c21-profile-showcase .auth-gallery-capture__items .c21-profile-showcase__thumb img,
.c21-profile-showcase .auth-gallery-capture__items .c21-profile-showcase__thumb .auth-gallery-capture__thumb {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

.c21-profile-showcase .c21-profile-showcase__thumb-empty {
    font-size: 0.85em;
    opacity: 0.7;
    text-align: center;
    padding: 0.5rem;
}

.c21-profile-showcase__collections {
    display: grid;
    gap: 1.25rem;
    margin-top: 1rem;
}

.c21-profile-showcase__collection {
    min-width: 0;
}

.c21-profile-showcase__unsaved {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #996800;
    background: #fff8e5;
    color: #6b4e00;
    font-size: 0.9em;
    font-weight: 600;
}

.c21-profile-showcase__collection-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.c21-profile-showcase__collection-name {
    flex: 1 1 12rem;
    margin: 0;
}

/* Inline beside the input: keep Label type scale, drop its block margin (Styler may set one). */
.c21-profile-showcase__collection-name > .c21-label {
    flex: 0 0 auto;
    margin: 0 !important;
}

.c21-profile-showcase__collection-name .c21-showcase-collection-name,
.c21-profile-showcase__collection-name input {
    flex: 1 1 12rem;
    width: auto;
    max-width: 24rem;
    min-width: 0;
}

.c21-profile-showcase__target-select-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.c21-profile-showcase__target-select-text {
    font-size: 1.125rem;
    font-weight: 600;
}

.c21-profile-showcase__target-select {
    flex: 1 1 14rem;
    width: auto;
    max-width: 24rem;
    min-width: 0;
}

.c21-profile-showcase__name-error {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #b32d2e;
    background: #fcf0f1;
    color: #8a1f1f;
    font-size: 0.9em;
    font-weight: 600;
}

.c21-profile-showcase__name-error[hidden] {
    display: none !important;
}

.c21-profile-showcase__items {
    margin: 0;
}

.c21-profile-showcase__item {
    min-width: 0;
}

.c21-profile-showcase__item.is-dragging {
    opacity: 0.55;
}

.c21-profile-showcase__handle {
    cursor: grab;
    user-select: none;
}

.c21-profile-showcase__meta {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    /* Override gallery description-slot min-height when used as showcase meta. */
    min-height: 0;
}

.c21-profile-showcase__draft {
    color: #996800;
    font-size: 0.85em;
    font-weight: 600;
}

/* Public profile showcase only — classes are exclusive to ProfileShowcaseUi::renderPublic*. */
.c21-profile-showcase-view__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 9rem);
    gap: 1rem;
    justify-content: start;
}

.c21-profile-showcase-view__item {
    margin: 0;
    max-width: 9rem;
}

.c21-profile-showcase-view__link {
    display: grid;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}

.c21-profile-showcase-view__link:hover .c21-profile-showcase-view__title,
.c21-profile-showcase-view__link:focus .c21-profile-showcase-view__title {
    text-decoration: underline;
}

.c21-profile-showcase-view__media {
    aspect-ratio: 1;
    width: 9rem;
    max-width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c21-profile-showcase-view__media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

.c21-profile-showcase-view__media-label {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.c21-profile-showcase-view__title {
    margin: 0;
    font-size: 0.95em;
}

@media (max-width: 640px) {
    .c21-profile-showcase-actions {
        grid-column: 1 / -1;
    }
}

/*
 * My Account — layout owned by Register-style Surface nesting
 * (page → form → section). Obsolete multi-column / card BEM chrome removed.
 */

/* Welcome title — shared .c21-heading look; centring scoped to this title only. */
.c21-auth-my-account .c21-auth-my-account__title {
    text-align: center;
}


/* Profile direct messaging — disabled control (logged-out / opt-out). */
.c21-auth-app .c21-profile-message-btn:disabled,
.c21-auth-app .c21-profile-message-btn[aria-disabled="true"],
button.c21-profile-message-btn:disabled,
button.c21-profile-message-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}