/* rad-intake: the shared guided-interview UI.
 *
 * Light DOM and `ri-` prefixed, deliberately: every Rad tool themes off
 * radtool-saas.css with its own --accent-* tokens, and Shadow DOM would cut that
 * cascade for no benefit. This sheet only reads tokens, it never defines a colour, so
 * the interview picks up each product's accent for free.
 *
 * Depends on: /_shared/radtool-saas.css (--accent-*, --ink-*, --border*, --font-*).
 */

.ri-cta {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: var(--accent-soft);
}
.ri-cta-t { font: 600 15px/1.4 var(--font-body); color: var(--ink); margin-bottom: 2px; }
.ri-hint  { font: 400 14px/1.5 var(--font-body); color: var(--ink-dim); }
.ri-row   { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.ri-row .input { flex: 1 1 240px; min-width: 0; }

.ri { border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px;
      margin-bottom: 20px; background: #FFFFFF; }
.ri-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ri-dots { display: flex; gap: 6px; }
.ri-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-mid); }
.ri-dots i.filled  { background: var(--accent-fill); }
.ri-dots i.current { background: var(--accent-ink); transform: scale(1.35); }

.ri-status { color: var(--ink-muted); font-size: 15px; padding: 12px 0; }
.ri-q { font: 600 17px/1.45 var(--font-body); color: var(--ink); margin-bottom: 14px; }

.ri-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 760px) { .ri-opts { grid-template-columns: 1fr; } }
.ri-opt {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  border: 1px solid var(--border-mid); border-radius: 9px; padding: 11px 13px;
  background: #FFFFFF; font: 400 14.5px/1.5 var(--font-body); color: var(--ink);
  cursor: pointer;
}
.ri-opt:hover { border-color: var(--accent-fill); }
.ri-opt:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.ri-opt .bx { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px;
              border-radius: 4px; border: 1.5px solid var(--border-mid); }
.ri-opt.on { border-color: var(--accent-fill); background: var(--accent-soft); }
.ri-opt.on .bx { background: var(--accent-fill); border-color: var(--accent-fill); }

/* The rejection row is visually separate from the six options on purpose: it is not a
   seventh answer, it is a statement that the question was wrong. Dashed so it never
   reads as just another choice. */
.ri-none { margin-top: 9px; }
.ri-none .ri-opt { border-style: dashed; }

.ri-foot { display: flex; align-items: center; justify-content: space-between;
           gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.ri-applied {
  border: 1px solid var(--border); border-left: 3px solid var(--accent-fill);
  background: var(--accent-soft); border-radius: 8px; padding: 12px 14px;
  font: 400 14px/1.55 var(--font-body); color: var(--ink); margin-bottom: 18px;
}
.ri-applied b { font-weight: 700; }
.ri-warn { border-left-color: var(--danger); background: #FEF2F2; }

/* Marks a field the interview filled, so it is obvious what to check. */
.ri-filled { border-color: var(--accent-fill) !important; }