/* alphadrill.css - extra components layered on top of exam.css + polish.css.
   Loaded LAST so these win for AlphaDrill-specific classes. Light/green theme
   to match the existing Prometric-style design. */

.page-head h1 { margin: 0 0 4px; font-size: 24px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 0; }

/* neutral chip (overrides the solid-colour .pill from exam.css for our use) */
.pill { background: #eef1f5; color: #334155; border: 1px solid #d6dadf;
  padding: 2px 10px; border-radius: 11px; font-size: 12px; font-weight: 600; }

.empty { background: #fff; border: 1px dashed #c4c8cc; border-radius: 8px;
  padding: 16px; text-align: center; }

.card { background: #fff; border: 1px solid #d6dadf; border-radius: 8px;
  padding: 18px; margin: 16px 0; }

/* form controls - token-based so they follow light/dark theme (these attribute
   selectors out-rank theme.css's plain `input` rule, so they must use the vars
   themselves or they'd stay white in dark mode). */
textarea, input[type="search"], input[type="date"], input[type="number"], select {
  font: inherit; padding: 8px; border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--surface); color: var(--ink-1); }
textarea { width: 100%; resize: vertical; }
label { display: block; font-size: 13px; color: #444; margin: 8px 0 2px; }

.btn-link { background: none; border: 0; color: #2a6fb0; cursor: pointer; padding: 9px 6px; }
.btn-reset { background: #fff; color: #b3261e; border: 1px solid #b3261e;
  border-radius: 4px; padding: 8px 14px; cursor: pointer; }

.code { background: #f1f3f5; border: 1px solid #d6dadf; border-radius: 6px;
  padding: 12px; overflow-x: auto; font-size: 12.5px; }
.msg { min-height: 1.2em; font-size: 14px; }
.msg.ok { color: #1f7a33; } .msg.bad { color: #b3261e; }

/* quiz runner */
.runner { background: #fff; border: 1px solid #d6dadf; border-radius: 8px; padding: 18px; margin-top: 18px; }
.q-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.q-stem { font-size: 17px; margin: 8px 0 16px; line-height: 1.5; }
.q-choices { display: flex; flex-direction: column; gap: 8px; }
.choice { text-align: left; background: #fff; color: #222; border: 1px solid #c4c8cc;
  border-radius: 6px; padding: 11px 14px; cursor: pointer; font: inherit; }
.choice:hover:not(:disabled) { border-color: #e8a33d; }
.choice.right { border-color: #1f7a33; background: rgba(31,122,51,.10); }
.choice.wrong { border-color: #b3261e; background: rgba(179,38,30,.10); }
.q-feedback { margin-top: 16px; }
.q-feedback .ok { color: #1f7a33; font-weight: 700; }
.q-feedback .bad { color: #b3261e; font-weight: 700; }
.q-nav { margin-top: 16px; }
.q-results { text-align: center; padding: 16px; }

/* paywall */
.locked-blur { filter: blur(6px); pointer-events: none; user-select: none; opacity: .85; }
.unlock-panel { border: 2px solid #8cc63f; background: linear-gradient(180deg, #f6fbef, #fff); }
.unlock-panel h2 { margin-top: 0; }
.unlock-panel .btn-primary { text-decoration: none; display: inline-block; }

/* exam-readiness card */
.readiness-card { background: linear-gradient(180deg, #fbfdfb, #fff); }
.readiness-main { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.gauge { flex: 0 0 200px; }
.gauge svg { display: block; }
.readiness-text { flex: 1; min-width: 180px; }
.readiness-text h2 { margin: 0 0 4px; font-size: 28px; }
.readiness-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 18px; margin: 16px 0 4px; }
.comp-top { display: flex; justify-content: space-between; font-size: 13px; color: #444; margin-bottom: 3px; }
.comp-top span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* progress bars + topic rows (dashboard) */
.bar { background: #e3e7eb; border-radius: 999px; height: 14px; overflow: hidden; }
.bar.small { height: 10px; }
.bar-fill { height: 100%; background: #8cc63f; width: 0; transition: width .4s; }
.bar-fill.warn { background: #d98324; }
.topic-row { display: grid; grid-template-columns: 170px 1fr 48px; gap: 10px; align-items: center; margin: 6px 0; }
.topic-name { font-size: 14px; }
.topic-acc { text-align: right; font-variant-numeric: tabular-nums; }

/* question bank list */
.bank-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bank-item { background: #fff; border: 1px solid #d6dadf; border-radius: 6px; padding: 10px 14px; }
.bank-item summary { cursor: pointer; }
.bank-body ul { list-style: none; padding: 0; }
.bank-body li { padding: 4px 0; }
.bank-body li.right { color: #1f7a33; font-weight: 600; }

/* guaranteed-import tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #d6dadf; margin: 14px 0 16px; flex-wrap: wrap; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: #555;
  cursor: pointer; padding: 9px 14px; font: inherit; font-weight: 600; margin-bottom: -1px; }
.tab:hover { color: #222; }
.tab.active { color: #1f7a33; border-bottom-color: #8cc63f; }
.howto { margin: 8px 0 14px; padding-left: 20px; color: #444; font-size: 14px; line-height: 1.6; }
.howto li { margin: 2px 0; }
code { background: #f1f3f5; border: 1px solid #e3e7eb; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }

.site-foot { border-top: 1px solid #d6dadf; padding: 18px 16px; text-align: center;
  color: #666; font-size: 13px; margin-top: 24px; }
.site-foot .fine { font-size: 12px; }