/* Shared workspace refinements. Keep control widths and media sizes in page styles. */
.detail-overview.detail-preview-panel { display: block; padding: 26px; }
.detail-media-summary { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 20px; }
.detail-overview .detail-cover { width: 120px; height: 120px; }
.detail-overview .detail-cover > img { object-fit: cover; }
.detail-overview .default-cover svg { width: 48px; height: 48px; }
.detail-overview .default-cover { gap: 12px; }
.detail-overview .default-cover span { font-size: 8px; letter-spacing: 1.4px; }
.detail-overview .detail-preview-info h2 { margin: 10px 0 8px; font-size: 21px; line-height: 1.45; }
.detail-file-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.detail-file-facts > span { overflow-wrap: anywhere; }
.detail-file-facts > span + span { padding-left: 12px; border-left: 1px solid var(--line); }
.detail-uploaded-line { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.detail-uploaded-line time { font-variant-numeric: tabular-nums; }
.detail-listening { margin-top: 20px; }
.detail-listening audio { display: block; height: 44px; }
.detail-playback-state { margin: 8px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.detail-info-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-info-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.detail-info-section h3 .icon { width: 17px; height: 17px; color: #64806c; }
.detail-term-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.detail-term-grid > div { padding: 14px; border-radius: 9px; background: #f5f7f4; }
.detail-overview dt { margin: 0 0 7px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.detail-overview dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.detail-term-grid dd { font-weight: 500; }
.detail-effective-deadline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 14px 2px 0; }
.detail-effective-deadline > span { font-size: 12px; color: var(--muted); }
.detail-effective-deadline strong { font-size: 14px; font-weight: 600; color: #2f6650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-overview .detail-deadline-note { margin: 8px 2px 0; font-size: 11px; line-height: 1.8; }
.detail-stat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; gap: 16px; align-items: baseline; }
.detail-stat-grid > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.detail-stat-grid .detail-visit-count { font-size: 24px; font-weight: 600; line-height: 1.25; }
.detail-stat-help { margin-top: 16px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.detail-stat-help summary { width: fit-content; cursor: pointer; padding: 2px 0; }
.detail-stat-help summary:focus-visible { outline: 2px solid #84bba4; outline-offset: 3px; border-radius: 2px; }
.detail-stat-help p { margin: 8px 0 0; }
@media (min-width: 1001px) and (max-width: 1200px) {
    .detail-overview.detail-preview-panel { padding: 20px; }
    .detail-media-summary { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
    .detail-overview .detail-cover { width: 96px; height: 96px; }
    .detail-overview .detail-preview-info h2 { font-size: 18px; }
}
@media (max-width: 560px) {
    .detail-overview.detail-preview-panel { padding: 20px; }
    .detail-media-summary { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 14px; }
    .detail-overview .detail-cover { width: 88px; height: 88px; }
    .detail-overview .default-cover svg { width: 38px; height: 38px; }
    .detail-overview .default-cover span { font-size: 6px; letter-spacing: 1px; }
    .detail-overview .default-cover { gap: 8px; }
    .detail-overview .detail-preview-info h2 { font-size: 17px; margin-top: 8px; }
    .detail-term-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .detail-term-grid > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px; }
    .detail-term-grid dt { margin-bottom: 0; }
    .detail-overview dd { font-size: 13px; }
    .detail-stat-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; }
    .detail-stat-grid > div + div { padding-left: 12px; }
    .detail-stat-grid .detail-visit-count { font-size: 22px; }
}
.replacement-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f7faf7;
}
.replacement-upload.has-file { border-color: #b5cebd; background: #f2f8f3; }
.replacement-file-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    color: #4e7656;
    background: #e6efe6;
}
.replacement-file-icon .icon { width: 24px; height: 24px; }
.replacement-file-info { flex: 1 1 160px; min-width: 0; }
.replacement-file-info strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.replacement-file-info > span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.replacement-file-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.replacement-file-actions .file-picker { display: inline-flex; margin: 0; white-space: nowrap; }
.replacement-file-actions .text-button { padding: 6px 0; white-space: nowrap; }
.replacement-upload[aria-busy="true"] .file-picker { opacity: .6; cursor: wait; }
@media (max-width: 760px) {
    .replacement-upload { padding: 16px; gap: 12px; }
    .replacement-file-info { flex-basis: calc(100% - 60px); }
    .replacement-file-actions { flex-basis: 100%; padding-top: 4px; }
}
:root {
    --muted: #596b61;
    --meta-size: 12px;
    --workspace-gap: 20px;
}

.content { padding-top: 28px; }
.page-heading { margin-bottom: var(--workspace-gap); }
.stats-grid { gap: 16px; margin-bottom: var(--workspace-gap); }
.stat-card { padding: 14px 18px; align-items: center; gap: 12px; }
.stat-card .stat-icon { width: 36px; height: 36px; margin-top: 0; }
.stat-card strong { font-size: 26px; line-height: 1.25; margin: 4px 0; }
.stat-card small, .stat-label, .panel-heading p, .field-hint,
.audio-size, .pagination, .page-footnote { color: var(--muted); }
th, td { font-size: var(--meta-size); color: var(--muted); }
.list-audio-info .audio-size, #list-table .uploaded-cell,
#list-table .expiry-cell, #list-table .audio-block-reason { font-size: var(--meta-size); }
#list-table .badge { font-size: var(--meta-size); }
.badge.inactive { color: #596b61; background: #edf1ed; }
.badge.expired { color: #89602b; background: #fbf1e3; }
.badge.disabled { color: #9b443e; background: #f9eceb; }

.admin-review-info { gap: 4px; }
.admin-review-owner, .admin-review-size, .admin-review-meta,
.admin-review-reason { font-size: var(--meta-size); }
.admin-review-meta { line-height: 20px; }
.admin-review-badges .badge { font-size: var(--meta-size); line-height: 18px; padding: 2px 8px; }
.admin-review-info h3[role="button"] { cursor: pointer; }
.admin-review-info h3[role="button"]:focus-visible { outline: 3px solid #84bba4; outline-offset: 3px; }
.admin-review-info.expanded h3, .admin-review-info.expanded .admin-review-reason {
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
}

.media-feedback { margin-top: 7px; font-size: 12px; color: #9b443e; white-space: normal; line-height: 1.6; }
.media-feedback .text-button { margin-left: 8px; color: var(--green); }
.batch-upload-footer {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 4px 20px #173e3212;
}
.batch-footer-actions { display: flex; align-items: center; gap: 10px; }
.library-tools { display: flex; align-items: center; gap: 12px; }
.library-tools .text-button { white-space: nowrap; flex-shrink: 0; }
.library-panel > .panel-heading { padding: 16px 24px; }
.library-panel > .panel-heading p { display: none; }
#list-filter-toggle { display: none; }
.input-feedback { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.hosting-summary { margin-bottom: 22px; border: 1px solid var(--line); background: #f4f8f4; border-radius: 10px; padding: 14px 18px; }
.hosting-summary-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; font-size: 12px; color: var(--muted); }
.hosting-summary-line strong { color: var(--text); font-weight: 600; }
.hosting-summary-line a { margin-left: auto; color: var(--green); }
.hosting-summary .notice { margin: 12px 0 0; }
.service-remaining { color: var(--green); }
.notice.service-urgent { background: #fff0e9; color: #8b4b33; }
.library-options { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; }
.library-options select { max-width: 320px; }
.batch-options { border: 0; padding: 0; margin: 22px 0; min-width: 0; }
.batch-options legend { font-size: 15px; font-weight: 600; }
.batch-options .library-options { margin-top: 8px; }
.batch-toolbar { flex-wrap: wrap; }
.category-assignment-dialog { width: min(460px, calc(100vw - 32px)); }
.category-assignment-dialog label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 500; }
.category-assignment-dialog .field-hint { margin-top: 10px; font-size: 12px; line-height: 1.8; }
.category-dialog { width: min(620px,calc(100vw - 32px)); max-height: 85vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; padding: 26px; color: var(--text); }
.category-dialog::backdrop { background: #183c2a55; }
.category-create,.category-row { display: flex; align-items: start; gap: 10px; margin: 16px 0; }
.category-create input,.category-row input { flex: 1; min-width: 0; }
.category-create .button,.category-row button { flex-shrink: 0; }
.category-row .input-feedback { flex-basis: 100%; }
.category-row { flex-wrap: wrap; }
.category-row input { flex-basis: 55%; }
.audio-category,.audio-statistics { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.hosting-term-control { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #f5f8f3; }
.admin-service-term { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #f5f8f3; }
.admin-service-term h3 { margin: 0 0 14px; font-size: 15px; }
.admin-service-term .checkbox-label { margin: 0 0 16px; }
.admin-term-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.admin-term-fields label { margin: 0 0 7px; }
.admin-term-fields #admin-account-date { width: 100%; max-width: none; }
.admin-service-term .field-hint { margin: 10px 0 0; }
.admin-service-term #admin-service-preview { margin: 16px 0 0; padding: 12px 14px; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
    .admin-service-term { padding: 16px; }
    .admin-term-fields { grid-template-columns: minmax(0,1fr); }
}
.admin-audio-statistics { margin-top: 12px; color: var(--muted); font-size: 11px; }
.admin-audio-statistics summary { cursor: pointer; color: var(--green); }
.admin-audio-statistics p { margin: 8px 0; line-height: 1.5; }
@media (min-width: 761px) {
    .audio-filter-toolbar { grid-template-columns: minmax(150px,1fr) 88px 284px 135px auto; }
    .audio-filter-toolbar .category-filter { width: auto; }
}
@media (min-width: 761px) and (max-width: 1250px) {
    .audio-filter-toolbar { grid-template-columns: minmax(160px,1fr) 88px 135px; }
    .audio-filter-toolbar > div:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
    .audio-filter-toolbar > div:nth-child(4) { grid-column: 3; grid-row: 1; }
    .audio-filter-actions { grid-column: 3; grid-row: 2; }
}
@media (max-width: 760px) {
    .hosting-summary { padding: 12px; }
    .hosting-summary-line { gap: 8px 12px; }
    .audio-filter-toolbar .category-filter { width: min(100%,200px); }
    .metadata > div { flex-wrap: wrap; gap: 4px 10px; }
    .metadata dd { overflow-wrap: anywhere; }
    .category-dialog { padding: 18px; }
    .library-panel > .panel-heading { flex-wrap: wrap; align-items: center; gap: 12px; }
    .library-tools { flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
    .library-tools .button { padding: 9px 10px; }
    .category-create { flex-wrap: wrap; }
    .category-create input { flex-basis: 100%; }
    .admin-toolbar { flex-wrap: wrap; }
    #admin-service-filter { width: auto; max-width: 100%; }
}
.input-feedback.danger-text { color: #9b443e; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #b15e56; }
.user-picker-input + .input-feedback { margin-top: 5px; }

/* Keep dates compact and leave a full-sized search action. */
.audio-date-range { gap: 6px; }
.audio-date-range input { flex: 0 0 118px; width: 118px; padding: 11px 6px; }
.audio-date-range input::-webkit-datetime-edit { flex: 0 0 auto; }
.audio-date-range input::-webkit-calendar-picker-indicator { margin-left: 2px; }
.audio-filter-actions { gap: 12px; }
.audio-filter-actions .button { min-width: 88px; justify-content: center; }
@media (min-width: 1251px) {
    .audio-filter-toolbar { grid-template-columns: minmax(150px,1fr) 88px 260px 135px minmax(140px,auto); }
}
@media (min-width: 761px) and (max-width: 1250px) {
    .audio-filter-toolbar { grid-template-columns: minmax(160px,1fr) 88px 150px; }
    .audio-filter-toolbar > div:nth-child(3) { width: 260px; }
}
@media (max-width: 760px) {
    .audio-filter-toolbar > div:nth-child(3) { width: min(100%,260px); }
    .audio-date-range input { flex: 1 1 0; width: 0; }
}

/* Reserve validation rows so messages do not move the centred login form. */
.login-page .login-form-wrap .input-feedback {
    display: block !important;
    min-height: 36px;
    margin: 4px 0 0;
}
.login-page .input-feedback[hidden] { visibility: hidden; }
.login-page #login-error, .login-page #login-notice {
    display: block !important;
    min-height: 44px;
    margin: 0 0 8px;
}
.login-page #login-error[hidden], .login-page #login-notice[hidden] { visibility: hidden; }
.login-page .login-form-wrap label { margin-top: 8px; }
.login-page .login-form-wrap .button { margin-top: 12px; }
.login-page .story-content { padding-top: clamp(16px,4vh,60px); padding-bottom: clamp(16px,4vh,60px); }
.login-page .login-form-section { padding-top: clamp(20px,4vh,50px); padding-bottom: clamp(20px,4vh,50px); }

/* Prioritise audio-name search over the two compact review filters. */
.admin-user-toolbar {
    display: grid;
    grid-template-columns: minmax(240px,1fr) 144px 180px minmax(144px,auto);
    align-items: end;
    gap: 16px;
}
.admin-user-toolbar label { margin: 0 0 7px; }
body[data-page="admin-users"] #admin-new-user { min-width: 128px; justify-content: center; }
.admin-user-toolbar input, .admin-user-toolbar select { width: 100%; max-width: none; }
.admin-user-toolbar .admin-filter-actions { gap: 12px; padding-bottom: 2px; }
.admin-user-toolbar .admin-filter-actions .button { min-width: 92px; justify-content: center; }
@media (min-width: 761px) and (max-width: 1250px) {
    .admin-user-toolbar { grid-template-columns: minmax(160px,1fr) 144px 180px; }
    .admin-user-toolbar .admin-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 760px) {
    .admin-user-toolbar { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .admin-user-toolbar .admin-filter-actions { justify-content: flex-end; }
}
.admin-audio-toolbar .admin-filter-actions { gap: 12px; }
.admin-audio-toolbar .admin-filter-actions .button { min-width: 92px; justify-content: center; }
@media (min-width: 1101px) {
    .admin-audio-toolbar { grid-template-columns: minmax(240px,1fr) 220px 148px minmax(144px,auto); }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .admin-audio-toolbar { grid-template-columns: minmax(180px,1fr) 220px; }
    .admin-audio-toolbar > .admin-filter-field:nth-child(3) { width: 148px; }
    .admin-audio-toolbar .admin-filter-actions { justify-content: flex-end; }
}

/* All workspace lists share the same compact pagination controls. */
.pagination-controls .page-size-select {
    width: 96px;
    min-width: 0;
    padding-left: 10px;
    padding-right: 28px;
    background-position: right 8px center;
}
.pagination-controls > span { min-width: 42px; text-align: center; white-space: nowrap; }
.pagination > [role="status"] { white-space: nowrap; }
.admin-review-table-header {
    background: #f7f9f7;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--meta-size);
    font-weight: 600;
}
.admin-review-header-info { grid-column: 1 / span 2; }
@media (min-width: 761px) {
    .admin-audio-card, .admin-review-table-header {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr) 112px;
        gap: 20px;
    }
    .admin-review-table-header { padding: 14px 24px; }
    #list-table th:nth-child(1) { width: 5%; }
    #list-table th:nth-child(2) { width: 52%; }
    #list-table th:nth-child(3) { width: 6%; }
    #list-table th:nth-child(4), #list-table th:nth-child(5) { width: 12%; }
    #list-table th:nth-child(6) { width: 13%; }
    #list-table th:nth-child(3), #list-table td:nth-child(3) { padding-left: 4px; padding-right: 4px; }
    #list-table td:nth-child(3) .badge { gap: 4px; padding-left: 6px; padding-right: 6px; }
    #list-table th:first-child, #list-table td:first-child { padding-left: 20px; padding-right: 8px; }
    #list-table th:last-child, #list-table td:last-child { padding-right: 20px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
    .admin-audio-card, .admin-review-table-header { grid-template-columns: 128px minmax(0, 1fr) 112px; gap: 16px; }
    .admin-review-table-header { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1051px) {
    .admin-review-content {
        grid-template-columns: clamp(200px, 34%, 300px) minmax(0, 1fr);
        column-gap: 16px;
    }
}
@media (min-width: 761px) and (max-width: 1050px) {
    .admin-review-player { max-width: none; }
}

@media (max-width: 760px) {
    .admin-review-table-header { display: none; }
    .pagination { flex-wrap: wrap; gap: 12px; }
    .pagination-controls { margin-left: auto; }
    .content { padding-top: 20px; }
    .stat-card { padding: 12px 10px; }
    .stat-card strong { font-size: 24px; }
    .stat-card small { display: none; }
    #list-filter-toggle { display: inline-flex; align-items: center; min-height: 36px; }
    .batch-upload-footer { bottom: 8px; padding: 12px; flex-wrap: wrap; gap: 10px; }
    .batch-footer-actions { flex-wrap: wrap; justify-content: flex-end; width: 100%; }
    .admin-review-actions .button { min-height: 40px; font-size: 12px; }
    #list-table .row-actions .text-button { min-height: 32px; display: inline-flex; align-items: center; }
}