/* Desk pages (2026-09-06): the five tool pages share one sheet so the tables, the
   forms and the verdict blocks read the same everywhere. Tokens only, so all three
   site themes pick it up without a second definition. */

.dp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.dp-tbl th,
.dp-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--cx-line, rgba(128, 128, 128, .18)); text-align: left; vertical-align: top; }
.dp-tbl th { font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.dp-tbl tr:last-child td { border-bottom: 0; }
.dp-tbl small { opacity: .65; }
.dp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-strong { font-weight: 600; font-size: 15px; }
.dp-tbl .is-pos { color: var(--cx-pos, #3f8f68); }
.dp-tbl .is-neg { color: var(--cx-neg, #b1554f); }

/* Forms: one column on a phone, as many as fit on a desk. */
.dp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.dp-form--wide { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.dp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; opacity: .85; }
.dp-form input,
.dp-form select {
  font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--cx-line, rgba(128, 128, 128, .28));
  background: var(--cx-raise, rgba(128, 128, 128, .06));
  color: inherit; min-width: 0;
}
.dp-form input:focus,
.dp-form select:focus { outline: 2px solid var(--cx-accent, #6fb3c9); outline-offset: 1px; }
.dp-out { min-height: 40px; }
.dp-h3 { font-size: 13px; margin: 16px 0 6px; opacity: .8; }

.dp-btn {
  font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cx-line, rgba(128, 128, 128, .3));
  background: var(--cx-raise, rgba(128, 128, 128, .08)); color: inherit;
}
.dp-btn:hover { border-color: var(--cx-accent, #6fb3c9); }

/* The verdict block leads every study, because the answer is usually "nothing here"
   and burying that under a table would be the dishonest way round. */
.dp-verdict { border: 1px solid var(--cx-line, rgba(128, 128, 128, .2)); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.dp-verdict h3 { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .65; margin: 0 0 6px; }
.dp-verdict__head { font-weight: 600; margin: 0 0 6px; }
.dp-verdict.is-live { border-color: var(--cx-accent, #6fb3c9); }
.dp-verdict p { margin: 0 0 6px; font-size: 13px; }
.dp-dim { margin: 0 0 18px; min-width: 0; }
.dp-dim .hx-tablewrap > .dp-tbl { min-width: 480px; }
.dp-dim h3 { font-size: 13px; margin: 0 0 6px; }

.dp-check { margin: 0; padding-left: 20px; }
.dp-check li { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }

.dp-gate { font-size: 14px; padding: 14px; border-radius: 10px; border: 1px dashed var(--cx-line, rgba(128, 128, 128, .3)); }

/* Wide tables scroll inside their own card rather than pushing the page sideways. */
.hx-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media print {
  .d5, .cx-cta, .hx-links, .dp-btn, .hx-switch { display: none !important; }
  .cx-card { break-inside: avoid; border: 1px solid #ccc; }
  body { background: #fff; color: #000; }
}

/* Replay quiz: the options are the whole interface, so they get the room. */
.rq-meta { font-size: 12px; opacity: .7; margin: 0 0 10px; }
.rq-q { font-size: 15px; font-weight: 600; margin: 14px 0 10px; }
.rq-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rq-opt {
  font: inherit; font-size: 13px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cx-line, rgba(128, 128, 128, .3));
  background: var(--cx-raise, rgba(128, 128, 128, .06)); color: inherit;
}
.rq-opt:hover:not(:disabled) { border-color: var(--cx-accent, #6fb3c9); }
.rq-opt:disabled { cursor: default; opacity: .55; }
.rq-opt.is-answer { opacity: 1; border-color: var(--cx-pos, #3f8f68); color: var(--cx-pos, #3f8f68); }
.rq-opt.is-picked { opacity: 1; border-color: var(--cx-neg, #b1554f); color: var(--cx-neg, #b1554f); }
.rq-result { border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--cx-line, rgba(128, 128, 128, .25)); }
.rq-result.is-right { border-color: var(--cx-pos, #3f8f68); }
.rq-result.is-wrong { border-color: var(--cx-neg, #b1554f); }
.rq-result p { margin: 0 0 6px; font-size: 13px; }
.rq-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ===== GEX THEMES (GENERATED - do not edit, run scripts/gen-themes.py) ===== */
/* -- theme white -- */
html[data-theme="white"] .dp-tbl .is-pos { color: var(--cx-pos, #337555); }
html[data-theme="white"] .dp-tbl .is-neg { color: var(--cx-neg, #753834); }
html[data-theme="white"] .rq-opt.is-answer { color: var(--cx-pos, #337555); }
html[data-theme="white"] .rq-opt.is-picked { color: var(--cx-neg, #753834); }
/* ===== END GEX THEMES ===== */