/* The research console uses the shared terminal palette without the participant dashboard's fixed mobile action bar. */
.admin-body { padding: 0; }
.admin-main { max-width: 1680px; margin: auto; padding: 24px 36px 80px; min-height: 100vh; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.admin-header span { color: var(--muted); font: 12px var(--mono); }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0; }
.admin-tabs a { min-height: 48px; padding: 14px 20px; border: 1px solid var(--border); color: var(--muted); }
.admin-tabs a[aria-current="page"] { background: var(--panel); color: var(--pink); box-shadow: inset 0 -3px var(--pink); }
.admin-filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 28px; }
.admin-filters > div { flex: 1; min-width: 150px; }
.admin-filters select, .admin-filters input { margin-bottom: 0; }
.admin-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 14px; margin: 24px 0; }
.admin-summary article { border: 1px solid var(--border); background: var(--panel-deep); padding: 20px; }
.admin-summary strong { display: block; color: var(--pink); font: 30px var(--display); margin-bottom: 8px; }
.admin-summary span { color: var(--muted); font-size: 12px; }
.admin-graphs, .admin-transfer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.admin-graph { min-width: 0; }
.admin-graph h3 { margin-top: 0; font-size: 19px; }
.admin-graph p { color: var(--muted); font-size: 12px; line-height: 1.65; min-height: 40px; }
.admin-graph > svg { display: block; width: 100%; height: auto; margin: 16px 0; }
/* Keep each legend label beside its small color key, including on narrow screens. */
.admin-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--ink); font-size: 12px; line-height: 1.5; margin: 10px 0; }
.admin-legend > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.admin-legend svg { display: block; flex: 0 0 9px; width: 9px; height: 9px; margin: 0; }
.admin-legend-label { overflow-wrap: anywhere; }
.admin-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.admin-main [data-panel] > .card { margin: 24px 0; }
.admin-main th, .admin-main td { padding: 12px; white-space: nowrap; vertical-align: top; }
.admin-main td.wrap, .admin-main th.wrap { white-space: normal; min-width: 180px; overflow-wrap: anywhere; }
.admin-main td select { min-width: 125px; }
.admin-main .table-scroll { max-height: 650px; }
.admin-main details .table-scroll { max-height: 300px; }
.admin-main pre { max-width: 600px; max-height: 350px; overflow: auto; white-space: pre-wrap; font-size: 11px; }
.admin-main button { white-space: normal; }
.admin-main #import-preview { padding: 14px 0; line-height: 1.8; }
.admin-main .plot-empty { padding: 64px 12px; text-align: center; }
.admin-main #user-search { max-width: 500px; }
@media(max-width:900px) { .admin-graphs,.admin-transfer-grid { grid-template-columns:1fr; } }
@media(max-width:680px) {
  .admin-main { padding: 18px 14px 60px; }
  .admin-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-tabs a { padding: 12px; font-size: 12px; text-align: center; }
  .admin-main h1 { font-size: 32px; overflow-wrap: anywhere; }
  .admin-filters { gap: 12px; }
  .admin-filters > div { min-width: 120px; }
  .admin-main .card { padding: 18px; }
}

/* The saved chart scrolls inside its card while row meanings wrap on phones. */
.potty-week { align-items: end; margin-bottom: 20px; }
.potty-week input { margin-bottom: 0; }
.potty-grid caption { text-align: left; padding: 12px; color: var(--muted); }
.potty-grid td { text-align: center; }
.potty-star { color: var(--gold); font-size: 24px; }
.potty-row-details details { padding: 12px 0; border-bottom: 1px solid var(--border); }
.potty-row-details summary, .potty-row-details dd, #potty-detail-title { overflow-wrap: anywhere; }
.potty-row-details dt { font-weight: bold; margin-top: 12px; }
.potty-row-details dd { margin: 4px 0 0; white-space: pre-wrap; }

/* Keep the publishing checkbox compact and the plain-text preview readable. */
.reminder-enabled-label { display:flex; align-items:center; gap:10px; margin:16px 0; }
.reminder-enabled-label input { width:auto; min-height:0; margin:0; }
.reminder-preview { padding:16px; border:1px solid var(--border); background:var(--panel-deep); white-space:pre-wrap; overflow-wrap:anywhere; }

#prediction-selection { overflow-wrap:anywhere; } /* Long participant labels and IDs remain readable on phones. */

.action-bin-control { max-width:240px; margin:20px 0; } /* Keep the time-bin selector usable at phone widths. */

/* Chart controls wrap independently from the responsive SVG; datasets stay in the authorized view. */
.chart-builder { margin:24px 0; min-width:0; }
.builder-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:end; }
.builder-controls input,.builder-controls select { margin-bottom:0; }
.builder-picker { margin:22px 0; }
#builder-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 18px; padding:16px 0; border:0; min-width:0; }
.builder-metric { display:flex; gap:8px; align-items:center; justify-content:space-between; min-width:0; border-bottom:1px solid var(--border); padding:7px 0; }
.builder-metric label { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0; font-size:12px; }
.builder-metric input[type="checkbox"] { width:18px; min-height:18px; margin:0; flex:0 0 18px; }
.builder-metric input[type="color"] { width:32px; height:32px; min-height:32px; padding:2px; margin:0; flex:0 0 32px; cursor:pointer; }
.builder-plot { overflow-x:auto; }
.builder-plot svg { display:block; width:100%; min-width:720px; height:auto; }
.builder-presets { margin-top:24px; }
#builder-status { font-size:13px; line-height:1.6; }
@media(max-width:1000px){#builder-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media(max-width:600px){.builder-controls,#builder-metrics { grid-template-columns:1fr; }.chart-builder .admin-buttons>* { flex:1 1 120px; }}

.push-preview { padding:16px; border:1px solid #805069; border-radius:12px; margin-bottom:18px; }
.push-preview p { white-space:pre-wrap; overflow-wrap:anywhere; }
#push-composer input,#push-composer select,#push-composer textarea { max-width:100%; }
.ai-document { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; }
#ai-prompt { display:block; width:100%; min-height:180px; resize:vertical; padding:14px; margin:10px 0 20px; border:1px solid var(--border); background:var(--panel-deep); color:var(--ink); font:inherit; line-height:1.5; }
#ai-enabled { width:18px; min-height:18px; margin:0; flex:0 0 18px; }
#ai-run-form { margin-top:24px; }
#ai-history button { margin:4px; }
#ai-token-list li { margin:12px 0; overflow-wrap:anywhere; }
#ai-api-url { overflow-wrap:anywhere; }
#ai-token-result { margin:20px 0; }
@media(max-width:600px) {
  #ai-history table, #ai-history tbody, #ai-history tr, #ai-history td { display:block; width:100%; min-width:0; }
  #ai-history thead { display:none; }
  #ai-history tr { padding:12px 0; border-bottom:1px solid var(--border); }
  #ai-history td { border:0; padding:8px 0; white-space:normal; }
  #ai-history td::before { content:attr(data-label); display:block; font-weight:bold; margin-bottom:5px; }
}

.moderation-card { padding:20px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere; }.moderation-card .moderation-card { padding:16px;border:1px solid var(--border);margin:12px 0; }
#moderation-reason { width:100%;min-height:100px;font:inherit;resize:vertical;padding:12px;background:var(--page);color:var(--ink);border:1px solid var(--border); }.moderation-card .status-gallery img { max-height:320px; }
#moderation-reason:focus-visible { outline:2px solid var(--gold);outline-offset:4px; }