/* ==========================================================================
   Quick Check — additions on top of the real assets/css/style.css design
   system. Every color, radius, font and spacing value below is one of
   style.css's own custom properties (--ink, --gold, --gold-deep, --paper,
   --paper-dim, --on-paper*, --radius-*, --font-mono, --steel, --ease) —
   nothing here introduces a new palette or scale. Structural classes that
   already exist on the real site (.field, .form-grid, .form-row-2,
   .honeypot, .form-status, .card, .card-paper, .btn/.btn-gold/.btn-outline,
   .stack, .fine) are reused directly by the markup this stylesheet styles;
   this file only adds what style.css has no equivalent for: the quiz's
   radio-option cards, the fee/DPO results display, and the two
   lead-capture forms' own small layout wrappers.

   Written with logical properties (inset-inline-start, border-inline-start,
   text-align: start/end) throughout, matching style.css's own approach —
   this file needs no [dir="rtl"] overrides as a result; the browser
   mirrors it automatically once the page's own dir="rtl"/"ltr" is set.
   No dark-mode variants: the real site has none, so neither does this.
   ========================================================================== */

.shell{ max-width: 640px; margin-inline: auto; }

/* ---- Disclaimer / conditional-question callouts ---- */
.disclaimer-box{
  background: var(--paper-dim); border-inline-start: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 16px 18px; margin-block-end: 26px;
}
html[dir="rtl"] .disclaimer-box{ border-radius: var(--radius-md) 0 0 var(--radius-md); }
.disclaimer-box strong{
  display:block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gold-deep); margin-block-end: 6px;
}
.disclaimer-box p{ font-size: 13px; color: var(--on-paper-muted); line-height: 1.6; margin: 0; }

.conditional{
  margin-block-start: 4px; padding: 14px 16px; border-inline-start: 3px solid var(--gold);
  background: var(--paper-dim); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
html[dir="rtl"] .conditional{ border-radius: var(--radius-md) 0 0 var(--radius-md); }

/* ---- Question fields (built on the real .field / .form-grid) ---- */
.qc-form{ display:grid; gap:26px; }
.qc-form .field .q{ font-size: .95rem; font-weight: 600; color: var(--on-paper); }
.qc-form .field .q-help{ font-size: .82rem; color: var(--on-paper-muted); margin-block-start:-2px; }

.num-input{ display:flex; align-items:center; gap:10px; }
.num-input input, .num-input select{ flex:1; }
.num-input .unit{ font-size: .82rem; color: var(--on-paper-muted); white-space: nowrap; }

.opt-grid{ display:flex; flex-direction:column; gap:8px; }
.opt-grid.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:560px){ .opt-grid.cols-2{ grid-template-columns:1fr; } }
.opt{
  display:flex; align-items:flex-start; gap:10px; border:1px solid var(--on-paper-line);
  border-radius: var(--radius-md); padding: 11px 14px; cursor:pointer; background:#fff;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.opt:hover{ border-color: var(--gold-deep); }
/* The real site's own .field input{width:100%} would otherwise stretch
   these radio inputs to fill the row (flex:none resolves its flex-basis
   from the width property) — pin width back to auto to undo just that. */
.opt input{ margin-block-start: 3px; accent-color: var(--gold-deep); flex: none; width: auto; }
.opt .opt-label{ font-size: .95rem; font-weight: 600; color: var(--on-paper); }
.opt .opt-sub{ font-size: .85rem; color: var(--on-paper-muted); margin-block-start:2px; }
.opt.is-checked{ border-color: var(--gold-deep); background: var(--paper-dim); }

.qc-btn-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-block-start: 6px; }
.qc-form-error{ font-size: .85rem; color: #8a2323; margin: 0; }

/* ---- Results ---- */
.results-head .org{ font-size: .9rem; color: var(--on-paper-muted); margin-block-end: 2px; }

.fee-table{ width:100%; border-collapse: collapse; margin-block: 8px 4px; font-size: .9rem; }
.fee-table th{
  text-align:start; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing:.05em; color: var(--steel); padding: 0 10px 8px; border-block-end: 1px solid var(--on-paper-line);
}
.fee-table td{ padding: 12px 10px; border-block-end: 1px solid var(--on-paper-line); vertical-align: top; }
.fee-table td.num{ font-family: var(--font-mono); text-align:end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-table tr.total td{ font-weight:700; border-block-start: 2px solid var(--ink); border-block-end: none; padding-block-start: 16px; }
.fee-table tr.total td.num{ font-size: 1.05rem; color: var(--gold-deep); }
.fee-table .item-label{ font-weight:600; color: var(--on-paper); }
.fee-table .item-note{ font-size: .8rem; color: var(--on-paper-muted); font-weight:400; margin-block-start: 3px; }
.fee-note{ font-size: .8rem; color: var(--on-paper-muted); background: var(--paper-dim); padding: 11px 14px; border-radius: var(--radius-sm); margin-block-start: 10px; }

.dpo-card{ margin-block-start: 20px; padding: 22px 24px; border-radius: var(--radius-md); background: var(--paper-dim); border: 1px solid var(--on-paper-line); }
.dpo-card .dpo-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-block-end: 8px; }
.dpo-badge{
  flex:none; width:42px; height:42px; border-radius:50%; background: var(--gold); color: var(--ink);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:800; font-size:17px;
}
.dpo-card h3{ font-size:1.15rem; margin:0; }
.dpo-card .dpo-band{ font-size:.85rem; color: var(--on-paper-muted); }
.dpo-card p{ font-size:.9rem; color: var(--on-paper-muted); margin: 8px 0 0; }

.results-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

.cta-block{ display:grid; gap:22px; margin-block-start: 8px; }

/* ---- Quick capture (inline, low-commitment "email me a PDF") ---- */
.quick-capture{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding: 15px 18px; border: 1px dashed var(--on-paper-line); border-radius: var(--radius-md);
}
.quick-capture .qc-label{ font-size: .85rem; color: var(--on-paper-muted); flex: 1; min-width: 220px; }
.quick-capture input[type=email]{
  border: 1px solid var(--on-paper-line); border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: .88rem; background:#fff; color: var(--on-paper); width: 220px;
}
.quick-capture .btn{ padding: 9px 18px; font-size: .85rem; }
.qc-status{ font-size: .82rem; }
.qc-status.is-success{ color: var(--gold-deep); font-weight: 600; }
.qc-status.is-error{ color: #8a2323; }

/* ---- Full-assessment lead card (sits on a .card inside #app) ---- */
.leadgen-card h3{ margin-block-end: 6px; }
.leadgen-card .leadgen-desc{ font-size: .92rem; color: var(--on-paper-muted); max-width: 60ch; margin-block-end: 4px; }
.leadgen-privacy{ font-size: .78rem; color: var(--steel); margin: 0; }

#toast{
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--on-navy); padding: 12px 20px; border-radius: var(--radius-md);
  font-size: .88rem; font-weight:600; opacity:0; pointer-events:none; transition: all .25s ease; z-index:50;
}
#toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px){
  .results-actions{ justify-content: stretch; }
  .results-actions .btn{ flex:1; justify-content:center; }
}