/* AuditDrop styles (student + host). Shares the GRA6140/mst0242 look. */

:root {
  --blue: #2c5f8a; --teal: #1e8f7a; --red: #c0392b; --amber: #b0700e;
  --purple: #6d4fa1; --ink: #1c2430; --mut: #5b6774; --bg: #f4f6f8;
  --good: #0ca30c; --line: #c8d0d8;
  --chatgpt: #10a37f; --gemini: #4285f4; --claude: #cc7a3b; --grok: #444a55;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 16px 14px 60px; }
.wrap.wide { max-width: 1120px; }
h1 { font-size: 1.25rem; margin: 8px 0 2px; }
h2 { font-size: 1.02rem; margin: 16px 0 8px; }
h3 { font-size: .92rem; margin: 10px 0 4px; }
.sub { color: var(--mut); font-size: .85rem; margin-bottom: 14px; }
.card { background: #fff; border-radius: 10px; padding: 14px 16px; margin: 10px 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.hint { font-size: .79rem; color: var(--mut); margin: 3px 0 5px; line-height: 1.4; }
.linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }
.err { color: var(--red); font-size: .9rem; min-height: 1.2em; }
.ok { color: var(--good); font-size: .9rem; }
.hidden { display: none !important; }
button { font: inherit; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; background: #e6ebf0; }
button:disabled { opacity: .5; cursor: default; }
.primary { background: var(--blue); color: #fff; font-weight: 600; }
.danger { background: var(--red); color: #fff; font-weight: 600; }
.ghost { background: #eef1f4; }
input[type=text], input[type=number], textarea, select {
  width: 100%; padding: 10px; font-size: 1rem; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; background: #fff;
}
textarea { resize: vertical; min-height: 64px; }
label { font-weight: 600; font-size: .9rem; display: block; margin: 10px 0 6px; }
.pill { display: inline-block; background: #eef1f4; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .85rem; }
.pill.open { background: #e9f7e9; border-color: #a9d8a9; color: var(--good); }
.pill.closed { background: #f2f2f2; color: var(--mut); }
.spinner { display: inline-block; width: 26px; height: 26px; border: 3px solid #cdd6de; border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.waitbox { text-align: center; padding: 34px 10px; color: var(--mut); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; align-items: center; }

/* model chips */
.model-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; font-weight: 700; font-size: .82rem; color: #fff; }
.m-ChatGPT { background: var(--chatgpt); } .m-Gemini { background: var(--gemini); }
.m-Claude { background: var(--claude); } .m-Grok { background: var(--grok); }

/* ----- Stage 1 checklist grid ----- */
.grid { display: grid; gap: 8px; }
.qblock { margin: 12px 0; }
.qblock .qtitle { font-weight: 700; margin: 6px 0; }
.cellrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cell { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; cursor: pointer; background: #fff; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.cell:hover { border-color: var(--blue); }
.cell.done { background: #eef7ef; border-color: #a9d8a9; }
.cell .framing { font-weight: 700; font-size: .9rem; }
.cell .status { font-size: .76rem; color: var(--mut); }
.cell.done .status { color: var(--good); font-weight: 700; }
.cell .warn { color: var(--amber); font-weight: 700; }
.progress-line { font-size: .85rem; color: var(--mut); margin: 6px 0; }
.progress-line b { color: var(--ink); }

/* ----- entry form ----- */
.scriptbox { background: #f0f4f8; border: 1px solid #d5e0ea; border-radius: 8px; padding: 8px 10px; font-size: .86rem; margin: 6px 0; white-space: pre-wrap; }
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.radio-row input { width: auto; }
.charcount { font-size: .76rem; color: var(--mut); text-align: right; }
.charcount.short { color: var(--amber); font-weight: 700; }
.thumb { max-width: 140px; border-radius: 6px; border: 1px solid var(--line); margin-top: 6px; }

/* ----- sliders (stage 2) ----- */
.dim { padding: 12px 0 6px; }
.dim .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dim .title { font-weight: 700; font-size: .98rem; }
.dim .value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; min-width: 2.6em; text-align: right; color: var(--blue); }
.dim .value.untouched { color: var(--mut); font-weight: 500; font-size: .85rem; }
.dim .anchors { display: flex; justify-content: space-between; gap: 12px; font-size: .74rem; color: var(--mut); margin: 2px 0 4px; }
.dim .anchors span:last-child { text-align: right; }
input[type=range] { flex: 1; width: 100%; margin: 0; accent-color: var(--blue); height: 40px; cursor: pointer; }
input[type=range].untouched { accent-color: #aab6c0; opacity: .75; }
.ratecard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.answerbox { background: #fafbfc; border: 1px solid #e2e8ee; border-radius: 8px; padding: 10px 12px; font-size: .92rem; line-height: 1.5; max-height: 40vh; overflow: auto; white-space: pre-wrap; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.dots { display: flex; gap: 5px; flex-wrap: wrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #d5dde4; }
.dot.done { background: var(--good); } .dot.cur { background: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px; }
.submitted { background: #e9f7e9; border: 1px solid #a9d8a9; border-radius: 8px; padding: 10px 14px; font-size: .92rem; margin: 10px 0; }

/* ----- host ----- */
.tabs { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.tabs button { padding: 9px 16px; font-weight: 600; }
.tabs button.sel { background: var(--blue); color: #fff; }
table.grid-t { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.grid-t th, table.grid-t td { padding: 6px 8px; border-bottom: 1px solid #eef1f4; text-align: center; }
table.grid-t th:first-child, table.grid-t td:first-child { text-align: left; }
table.grid-t th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.mono { font-variant-numeric: tabular-nums; }
.tick { color: var(--good); font-weight: 800; } .cross { color: #cdd6de; }
.miss { color: var(--red); font-weight: 700; }
table.stats { border-collapse: collapse; width: 100%; font-size: 1rem; }
table.stats th, table.stats td { padding: 7px 10px; text-align: right; border-bottom: 1px solid #eef1f4; font-variant-numeric: tabular-nums; }
table.stats th:first-child, table.stats td:first-child { text-align: left; }
table.stats th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
svg.ad-chart { width: 100%; height: auto; display: block; background: #fff; border-radius: 8px; }
#qr img { image-rendering: pixelated; width: 190px; height: 190px; }
.joinurl { font-size: 1.15rem; font-weight: 700; word-break: break-all; }
.headline { font-size: 1.1rem; line-height: 1.5; }
.headline b { color: var(--blue); }
.answercol { border: 1px solid #e2e8ee; border-radius: 8px; padding: 10px; background: #fff; }
.answercols { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.demo-banner { background: repeating-linear-gradient(45deg, #fff3cd, #fff3cd 14px, #ffe9a8 14px, #ffe9a8 28px); border: 2px dashed #b0700e; color: #7a4d00; font-weight: 700; border-radius: 8px; padding: 8px 14px; margin: 10px 0; text-align: center; }
footer.ethics { margin-top: 26px; padding: 12px 14px; background: #eef4fa; border: 1px solid #cfe0ee; border-radius: 8px; font-size: .82rem; color: #33475b; line-height: 1.5; }
.robust { font-size: .8rem; color: var(--amber); font-weight: 600; margin: 8px 0; }
mark.shared { background: #fff2a8; border-radius: 3px; padding: 0 1px; }

/* ----- projector / presentation (dark) ----- */
body.dark { background: #0d1117; color: #e8edf2; }
.proj { max-width: none; padding: 3vh 4vw; }
.proj h1, .proj h2 { color: #fff; }
.proj .panel { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; }
.proj .huge { font-size: clamp(3rem, 12vw, 11rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.proj .big { font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 700; }
.proj .label { font-size: clamp(1rem, 2vw, 1.6rem); color: #9fb0c0; letter-spacing: .02em; }
.proj svg.ad-chart { background: transparent; }
.proj .navbar { position: fixed; bottom: 14px; right: 18px; font-size: .9rem; color: #6b7a8a; }
.proj .navbar button { background: #1b2430; color: #cdd8e2; margin-left: 6px; }
.proj table.stats { color: #e8edf2; font-size: clamp(1rem, 2.4vw, 2rem); }
.proj table.stats th, .proj table.stats td { border-color: #24303d; }
.proj table.stats th { color: #9fb0c0; }
.reveal-hidden { filter: blur(14px); opacity: .35; transition: filter .4s, opacity .4s; }
.step-hint { color: #6b7a8a; font-size: 1rem; margin-top: 10px; }