.staff-dashboard { min-inline-size: 0; padding-block: 1rem; }
#staff-panel:not([data-tools-ready="true"]) [data-staff-tool-panel] { display: none; }
#staff-panel [data-staff-tool-panel][hidden] { display: none !important; }
.staff-destination-nav { display: grid; gap: .4rem; min-inline-size: 0; }
.staff-destination-nav select { inline-size: 100%; min-block-size: 44px; font-size: 1rem; }
.staff-destination-nav label { font-weight: 650; }
.staff-destination-nav p { margin: 0; overflow-wrap: anywhere; }
.staff-dashboard h3 { font-size: 1.25rem; }
.staff-dashboard label { font-size: 1rem; }
.staff-dashboard .form-detail { font-size: .9rem; line-height: 1.6; }
.staff-dashboard input, .staff-dashboard select { min-block-size: 44px; font-size: 1rem; }
.staff-dashboard[hidden] { display: none !important; }
.dashboard-heading, .dashboard-actions, .dashboard-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.dashboard-heading { justify-content: space-between; }
.dashboard-heading h3 { margin: 0; }
.dashboard-time { font-size: .85rem; overflow-wrap: anywhere; }
.dashboard-metric-group { margin-block: 1.5rem; }
.dashboard-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; margin: 0; }
.dashboard-metric { min-inline-size: 0; padding: 1rem; border: 1px solid var(--color-border, #d7d3c8); border-radius: var(--radius-card, 1rem); background: var(--color-surface, #fff); }
.dashboard-metric dt { line-height: 1.5; overflow-wrap: anywhere; }
.dashboard-metric dd { font-size: 1.8rem; font-weight: 700; margin: .5rem 0 0; }
.dashboard-search-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; gap: .75rem; margin-block: 1rem; }
.dashboard-search-form label { display: grid; gap: .4rem; min-inline-size: 0; }
.dashboard-search-form input, .dashboard-search-form select { inline-size: 100%; min-inline-size: 0; }
.dashboard-members { display: grid; gap: 1rem; list-style: none; padding: 0; margin-block: 1rem; }
.dashboard-member { min-inline-size: 0; padding: 1rem; border: 1px solid var(--color-border, #d7d3c8); border-radius: var(--radius-card, 1rem); background: var(--color-surface, #fff); overflow-wrap: anywhere; }
.dashboard-member h4 { font-size: 1.15rem; margin: 0 0 .75rem; }
.dashboard-member-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem 1rem; margin: 0; }
.dashboard-member-fields div { min-inline-size: 0; }
.dashboard-member-fields dt { font-size: .85rem; font-weight: 600; }
.dashboard-member-fields dd { margin: .3rem 0 0; }
.staff-dashboard button { min-block-size: 44px; white-space: normal; overflow-wrap: anywhere; }
.dashboard-pagination { margin-block: 1rem; }
.dashboard-funnel { margin-block: 1.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border, #d7d3c8); min-inline-size: 0; }
.dashboard-funnel h4 { margin: 0; font-size: 1.2rem; }
.dashboard-funnel-filter { display: grid; gap: .4rem; margin-block: 1rem; max-inline-size: 26rem; }
.dashboard-funnel-filter select { inline-size: 100%; min-inline-size: 0; }
.dashboard-funnel-stages { list-style: none; padding: 0; display: grid; gap: .7rem; }
.dashboard-funnel-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; padding: .85rem; border: 1px solid var(--border, #d7d3c8); border-radius: .7rem; background: var(--card, #fff); }
.dashboard-funnel-stage h5 { font-size: 1rem; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.dashboard-funnel-stage p { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.dashboard-funnel-stage progress { grid-column: 1 / -1; inline-size: 100%; block-size: .65rem; accent-color: #315341; }
@media (max-width: 24rem) { .dashboard-funnel-stage { grid-template-columns: minmax(0, 1fr); } .dashboard-funnel-stage p { text-align: start; } }
@media (max-width: 40rem) { .dashboard-search-form { grid-template-columns: minmax(0, 1fr); } .dashboard-search-form button { inline-size: 100%; } }

/* ID submission cards, automatic image views and manual review actions. */
.id-review-queue .id-submission-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 16px; border-radius: 12px; background: #fffdf8; }
.id-submission-badge { padding: 4px 10px; border-radius: 20px; background: #edf1e7; color: #344b3c; font-size: 13px; font-weight: 650; }
.id-submission-date { grid-column: 1 / -1; color: #586659; font-size: 13px; font-weight: 400; }
.id-review-current-only { display: grid; gap: 16px; }
.id-review-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.id-review-decision-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.id-review-decision-actions > button { flex: 1; min-width: min(170px, 100%); }
.id-review-side > .form-detail { margin: 0; min-height: 24px; }
.id-review-other-details { border-top: 1px solid #dedacc; padding-top: 12px; }
.id-review-other-details summary { cursor: pointer; padding: 10px 0; color: #43574a; font-weight: 650; }
.id-review-other-details summary:focus-visible { outline: 3px solid #ad7640; outline-offset: 3px; }
.id-review-other-details[open] > :not(summary) { margin-top: 12px; }
@media (max-width: 480px) { .id-review-check-grid { grid-template-columns: 1fr; } .id-review-queue .id-submission-card { grid-template-columns: 1fr; } .id-submission-badge { justify-self: start; } }

/* Keep the section switch and session action reachable during a long review. */
.staff-page .message { margin-block: 1.75rem 1rem; }
.staff-page .message h1 { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.2; }
.staff-page .intro { max-inline-size: 48rem; font-size: 1rem; }
.staff-page > .card { padding: clamp(1rem, 3vw, 1.75rem); }
.staff-toolbar { position: sticky; inset-block-start: .5rem; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; padding: .75rem; border: 1px solid var(--color-border, #d9ded1); border-radius: var(--radius-card, 1rem); background: var(--color-surface, #fffefa); box-shadow: 0 3px 12px rgb(32 58 48 / 8%); }
.staff-toolbar > button { min-block-size: 44px; margin: 0; }
#staff-panel :is(h3, h4, [tabindex="-1"]) { scroll-margin-block-start: 9rem; }
#staff-panel :is(button, select, input, textarea) { min-inline-size: 0; max-inline-size: 100%; }
#staff-panel button { min-block-size: 44px; white-space: normal; overflow-wrap: anywhere; }
#staff-panel .id-review-heading-row { flex-wrap: wrap; }
.staff-decision-result { padding: 1rem; border: 1px solid var(--color-primary, #315442); border-inline-start-width: .3rem; border-radius: var(--radius-control, .625rem); background: #edf3ea; color: var(--color-ink, #203a30); line-height: 1.65; overflow-wrap: anywhere; }
.staff-decision-feedback:empty { display: none; }
.staff-queue-message { color: var(--color-muted, #526159); line-height: 1.6; }
.staff-page :is(.id-review-decision, .staff-photo-review-reject, .staff-safety-viewer) { border-color: var(--color-border, #d9ded1); }
@media (max-width: 36rem) {
  .staff-toolbar { grid-template-columns: minmax(0, 1fr); }
  .staff-toolbar > button { justify-self: start; }
  #staff-panel .id-review-heading-row > button { inline-size: 100%; }
  #staff-panel :is(.id-review-decision-actions, .dashboard-actions) > button { flex-basis: 100%; }
}
@media (max-height: 32rem) { .staff-toolbar { position: static; } }
.staff-feedback-list { padding: 0; list-style: none; display: grid; gap: 1rem; }
.staff-feedback-card { min-inline-size: 0; padding: 1rem; border: 1px solid var(--color-border, #d7d3c8); border-radius: var(--radius-card, 1rem); background: var(--color-surface, #fff); overflow-wrap: anywhere; }
.staff-feedback-card > bdi { display: block; font-weight: 700; }
.staff-feedback-card > p { margin-block: .75rem; }
.feedback-message { white-space: pre-wrap; unicode-bidi: plaintext; }

/* Traffic stays within the page; wide numeric tables scroll within labelled regions. */
.traffic-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
#staff-panel .traffic-presets button { flex: 1 1 7rem; white-space: nowrap; }
.traffic-filter-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; margin-block: 1rem; }
.traffic-filter-form label { display: grid; gap: .4rem; min-inline-size: 0; }
.traffic-filter-form input { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
.traffic-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.traffic-card { min-inline-size: 0; padding: 1rem; border: 1px solid var(--color-border, #d7d3c8); border-radius: var(--radius-card, 1rem); background: var(--color-surface, #fff); }
.traffic-card h4 { margin-block: 0 .5rem; }
.traffic-card p { font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.traffic-card .dashboard-metric { padding: .6rem; }
.traffic-card .dashboard-metric dd { font-size: 1.5rem; }
.traffic-warning { line-height: 1.6; border-inline-start: .25rem solid #ac763d; padding-inline-start: .75rem; overflow-wrap: anywhere; }
.traffic-warning:empty { display: none; }
#traffic-results { min-inline-size: 0; }
#traffic-results[hidden] { display: none !important; }
.traffic-table-scroll { max-inline-size: 100%; min-inline-size: 0; overflow-x: auto; margin-block: 1rem; border: 1px solid var(--color-border, #d7d3c8); border-radius: .6rem; }
.traffic-table-scroll:focus-visible { outline: 3px solid #ad7640; outline-offset: 3px; }
.traffic-table { inline-size: 100%; min-inline-size: 32rem; border-collapse: collapse; font-size: .9rem; line-height: 1.6; }
.traffic-table :is(th, td) { padding: .65rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-border, #d7d3c8); min-inline-size: 5rem; overflow-wrap: anywhere; }
.traffic-table thead th { background: #edf1e7; }
.traffic-table tbody th { font-weight: 500; max-inline-size: 15rem; }
.traffic-table td { font-variant-numeric: tabular-nums; }
.traffic-table progress { display: block; inline-size: 5rem; block-size: .4rem; margin-block-start: .5rem; accent-color: #315341; }
@media (max-width: 40rem) { .traffic-filter-form, .traffic-cards { grid-template-columns: minmax(0, 1fr); } .traffic-filter-form button { inline-size: 100%; } }