/* =========================================================
   ABZ — Submissions UI (shared, identical to Decodable)
   Load AFTER rr.css so these win.
   ========================================================= */

/* ---------- Recent submissions card (on page) ---------- */
.subs_card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  max-width:680px;
  margin-inline:auto;
}
.subs_card_head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.subs_card_head h3{ margin:0; font-weight:800; }
.subs_actions{ display:flex; align-items:center; gap:10px; }
.subs_badge{
  display:inline-grid; place-items:center;
  min-width:28px; height:28px; padding:0 6px;
  background:#ef4444; color:#fff; font-weight:800; font-size:.85rem;
  border-radius:999px; line-height:1; box-shadow:0 6px 14px rgba(239,68,68,.25);
}
.subs_badge.hidden{ display:none !important; }
.btn-text.subtle-link{ background:transparent; border:none; color:#2563eb; font-weight:800; cursor:pointer; }
.btn-text.subtle-link:hover{ text-decoration:underline; }

.subs_two{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.subs_two li{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  background:#111827; color:#fff; border-radius:14px; padding:10px 12px;
}
.subs_avatar{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; color:#111827;
  background:conic-gradient(from 180deg at 50% 50%, #06b6d4, #8b5cf6);
}
.subs_text{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.subs_text .name{ font-weight:800; }
.subs_text .sep{ margin:0 6px; opacity:.7; }
.subs_text .set{ font-weight:800; }
.subs_time{ color:#cbd5e1; font-weight:700; font-size:.9rem; }
.subs_empty{ color:#6b7280; margin:6px 2px 2px; }

/* ---------- Submissions modal container (same size as Decodable) ---------- */
.rr-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(3,7,18,.58); z-index:60; }
.rr-modal.show{ display:flex; }
.rr-modal .rr-modal-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  width:min(92vw, 560px); max-height:82vh; overflow:auto; padding:18px;
  box-shadow:0 18px 40px rgba(2,6,23,.24);
}
/* wider only for the submissions list page */
#subsModal .subs_modal_card{ width:min(92vw, 880px); max-height:82vh; overflow:auto; padding:0; }

/* Keep detail drawer above the list modal */
#subsModal{ z-index:60; }
#subsDetailModal{ z-index:70; }

/* ---------- Submissions modal header + filters ---------- */
.subs_modal_head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; background:#fff; border-bottom:1px solid #e5e7eb;
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.subs_modal_head h3{ margin:0; font-weight:800; }

.subs_filters{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:12px 16px; background:#fafafa; border-bottom:1px solid #e5e7eb;
}
.subs_filters label{ display:grid; gap:6px; font-weight:700; color:#64748b; }
.subs_filters select{
  appearance:none; -webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .6rem center/16px 16px;
  border:1px solid #e5e7eb; border-radius:10px; padding:10px 34px 10px 12px; font-weight:700; color:#111827;
}

/* ---------- Submissions list (full view) ---------- */
.subs_list{ list-style:none; margin:0; padding:14px 14px 18px; display:grid; gap:10px; }
.subs_item{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  background:#111827; color:#fff; border-radius:14px; padding:12px 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}
.subs_item .ava{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; color:#111827;
  background:conic-gradient(from 180deg at 50% 50%, #06b6d4, #8b5cf6);
}
.subs_item .main{ min-width:0; }
.subs_item .line1{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-weight:800; }
.subs_item .line1 .dot{ opacity:.65; }
.subs_item .line2{ color:#cbd5e1; font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:10px; }
.subs_item .score-mini{ font-weight:900; }
.subs_item .actions{ display:flex; gap:8px; }

/* Chip buttons on dark row */
.subs_item .btn-chip{
  border:none; border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer;
  background:#1f2937; color:#e5e7eb; border:1px solid rgba(255,255,255,.06);
}
.subs_item .btn-chip:hover{ background:#0f172a; }
.subs_item .btn-chip.danger{ color:#fecaca; border-color:rgba(239,68,68,.35); }

/* Empty + load more */
#subsEmptyFull{ color:#6b7280; text-align:center; margin:8px 0 16px; }
#subsLoadMore{ display:block; margin:8px auto 14px; }

/* ---------- Details drawer content (drawer container size already set) ---------- */
#sdmList{ list-style:none; margin:0; padding:12px 16px 18px; display:grid; gap:12px; }
.detail_row{ border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.detail_title{ font-weight:800; margin-bottom:4px; }
.detail_prompt{ margin-bottom:8px; }
.detail_text{ color:#111827; }
.detail_opts{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.detail_opts .opt{ padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; }
.detail_opts .opt.correct{ border-color:#16a34a; background:#f0fdf4; }
.detail_opts .opt.picked{ border-color:#f59e0b; background:#fffbeb; }

/* Score tint (same tokens as Decodable) */
.score-mini{ font-weight:800; }
.score-mini.ok{ color:#16a34a; }
.score-mini.mid{ color:#d97706; }
.score-mini.bad{ color:#dc2626; }
.score-mini.muted{ color:#6b7280; }

/* Helper */
.hidden{ display:none !important; }

/* ===== Submissions UI — match Decodable exactly ===== */
/* Expect HTML like:
<div id="subsModal" class="rr-modal">
  <div class="rr-modal-card subs_modal_card">
    <div class="subs_head">...</div>
    <div class="subs_filters">...</div>
    <ul class="subs_list"> <li class="subs_row"> ... </li> ... </ul>
  </div>
</div>
*/

/* ---- palette pulled from Decodable modal ---- */
#rrRoot .rr_app {
  --subs-surface: #1f2430;            /* panel bg (dark)          */
  --subs-row:     #2a303c;            /* row bg                    */
  --subs-border:  rgba(255,255,255,.08);
  --subs-ink:     #e5e7eb;
  --subs-muted:   #a8b0bb;
  --subs-chip:    rgba(255,255,255,.06);
  --subs-shadow:  0 24px 50px rgba(0,0,0,.45);
  --subs-ring:    0 0 0 3px rgba(123,97,255,.25);
  --subs-ok:      #16a34a;
  --subs-warn:    #d97706;
  --subs-bad:     #dc2626;
}

/* ---- force the RR modal to use Decodable sizing/skin ONLY for submissions ---- */
#rrRoot .rr_app .rr-modal .subs_modal_card{
  width: min(92vw, 760px);            /* same visual size as Decodable */
  max-height: 82vh;
  background: var(--subs-surface);
  color: var(--subs-ink);
  border: 1px solid var(--subs-border);
  border-radius: 20px;
  padding: 14px 14px 16px;
  box-shadow: var(--subs-shadow);
}

/* Title bar */
#rrRoot .rr_app .subs_head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--subs-chip);
  border: 1px solid var(--subs-border);
  border-radius: 16px;
  padding: 10px 12px;
  margin: 2px 2px 12px;
}
#rrRoot .rr_app .subs_title{
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  background: linear-gradient(90deg, #ff914d, #b388ff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Head actions */
#rrRoot .rr_app .subs_head .btn-pill{
  appearance:none; border:1px solid var(--subs-border);
  background:#ff4d4d; color:#fff; font-weight:800;
  padding: 8px 14px; border-radius: 999px; cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
#rrRoot .rr_app .subs_head .btn-ghost{
  appearance:none; border:1px solid var(--subs-border);
  background: transparent; color: var(--subs-ink);
  padding: 8px 12px; border-radius: 12px; font-weight: 700; cursor:pointer;
}

/* Filters row */
#rrRoot .rr_app .subs_filters{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px;
  background: var(--subs-chip);
  border: 1px solid var(--subs-border);
  border-radius: 16px;
  padding: 10px; margin-bottom: 12px;
}
#rrRoot .rr_app .subs_filters label{ font-weight:700; font-size:.9rem; color:var(--subs-muted); }
#rrRoot .rr_app .subs_filters .control{
  width:100%; appearance:none; outline:none;
  background: #222836; color: var(--subs-ink);
  border: 1px solid var(--subs-border);
  border-radius: 12px; padding: 10px 12px; font-weight:700;
}
#rrRoot .rr_app .subs_filters .control:focus{ box-shadow: var(--subs-ring); }

/* List + rows */
#rrRoot .rr_app .subs_list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
#rrRoot .rr_app .subs_row{
  display:grid; grid-template-columns: auto 1fr auto; gap:12px; align-items:center;
  background: var(--subs-row);
  border: 1px solid var(--subs-border);
  border-radius: 16px; padding: 12px 12px;
}
#rrRoot .rr_app .subs_row:hover{ background: #303745; }

/* Avatar coin */
#rrRoot .rr_app .subs_avatar{
  width: 44px; height: 44px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; color:#fff;
  background:#3b82f6; /* color comes from initial; JS can set per name if you like */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}

/* Row text */
#rrRoot .rr_app .subs_main{ display:grid; gap:2px; }
#rrRoot .rr_app .subs_line1{ font-weight:800; }
#rrRoot .rr_app .subs_line2{ color:var(--subs-muted); font-weight:700; font-size:.95rem; }
#rrRoot .rr_app .subs_line2 .dot{ opacity:.6; margin:0 6px; }
#rrRoot .rr_app .score-mini{ font-weight:800; }
#rrRoot .rr_app .score-mini.ok{ color: var(--subs-ok); }
#rrRoot .rr_app .score-mini.mid{ color: var(--subs-warn); }
#rrRoot .rr_app .score-mini.bad{ color: var(--subs-bad); }

/* Row actions */
#rrRoot .rr_app .subs_actions{ display:flex; gap:8px; }
#rrRoot .rr_app .subs_actions .btn{
  appearance:none; cursor:pointer; font-weight:800;
  border:1px solid var(--subs-border);
  padding: 8px 12px; border-radius: 999px;
  background:#374151; color:#e5e7eb;            /* “Details” */
}
#rrRoot .rr_app .subs_actions .btn.delete{
  background:#3a1f22; color:#fca5a5;            /* “Delete” */
  border-color: rgba(239,68,68,.35);
}

/* Close button in header or top-right */
#rrRoot .rr_app .subs_close{
  background:transparent; border:1px solid var(--subs-border);
  color:var(--subs-ink); border-radius:12px; padding:8px 12px; font-weight:800;
}

#rrRoot .detail_text{
    color: white;
}

#rrRoot .opt.correct{
    color: #333;
}

.hero, header{
    background-color: white !important;
}

#subsCardTitle{
    color: #333;
}

/* Mobile tweaks */
@media (max-width: 640px){
  #rrRoot .rr_app .rr-modal .subs_modal_card{ width:min(94vw, 560px); }
  #rrRoot .rr_app .subs_filters{ grid-template-columns:1fr; }
  #rrRoot .rr_app .subs_actions{ flex-wrap:wrap; }
}