/* ========================================================================
   investor-ioi.css — Indication-of-Interest (IOI) workflow styles.
   RetirePlusPlus Investor Module ($30M Series B).

   Owns the SHARED contract classes for BOTH:
     1. the IOI form page (investor-ioi.html):
        .ioi-form .ioi-field .ioi-levelseg .ioi-disclaimer .ioi-ack
        .ioi-actions .ioi-success .ioi-error (+ supporting page chrome)
     2. the decision-point panel consumed by FE-PROCEED on the pitch deck,
        executive summary, business plan and learn hub:
        .vc-proceed .vc-proceed__grid .vc-proceed__opt .vc-proceed__note

   Consumes vc-tokens.css semantic roles ONLY — NO raw hex, NO :root /
   [data-theme] palette blocks (those live in vc-tokens.css; vc-aliases.css
   preserves legacy var names). Theme-aware, WCAG 2.1 AA, mobile-first,
   reduced-motion aware, print-aware.

   CSP: external CSS only; NO inline style. No dynamic style is set from JS
   on these classes (the only sanctioned JS style anywhere is
   el.style.setProperty('--x', …); this page does not need it).
   ======================================================================== */

/* Page canvas: vc-base.css carries a legacy :root that pins `body` to a fixed
   white background (it loads after vc-aliases.css and does NOT flip with the
   theme). Re-assert the semantic canvas/text roles here (page-scoped,
   token-driven, theme-aware) so the dark default renders correctly. Matches
   the pattern used by the other page CSS files. */
.ioi-body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
}

/* ========================================================================
   1.  PAGE LAYOUT
   ======================================================================== */
.ioi-page {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-20);
}

@media (min-width: 48rem) {
  .ioi-page { padding-top: var(--space-12); }
}

.ioi-head {
  margin-bottom: var(--space-8);
  text-align: center;
}

.ioi-eyebrow { margin-bottom: var(--space-3); }

.ioi-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}

.ioi-intro {
  max-width: 40rem;
  margin: 0 auto;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ========================================================================
   2.  THE FORM
   ======================================================================== */
.ioi-form {
  display: block;
}

/* Each logical group is a card so the long form reads as digestible steps. */
.ioi-fieldset {
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  min-inline-size: 0; /* allow children to shrink inside the fieldset */
}

.ioi-legend {
  /* fieldset legends sit on the box edge */
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.ioi-help {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Responsive 2-up field grid (single column on phones). */
.ioi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}

@media (min-width: 40rem) {
  .ioi-grid { grid-template-columns: 1fr 1fr; }
  /* The reference-ID field reads better full-width. */
  .ioi-grid .ioi-field:has(#ioi-reference_code) { grid-column: 1 / -1; }
}

.ioi-grid--sign { margin-top: var(--space-5); }

.ioi-field {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.ioi-field > label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.ioi-optional,
.ioi-field > label .ioi-optional {
  font-weight: 400;
  color: var(--text-muted);
}

/* Inputs/selects/textarea theming is inherited from vc-components .vc-form;
   we only add IOI-specific affordances below. The form carries .vc-form. */

.ioi-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Currency-prefixed numeric inputs ($ ____). */
.ioi-input-affix {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ioi-input-affix__lead {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-family: var(--font-data);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border: 0.0625rem solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.ioi-input-affix__field {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

/* Soft-circle field highlight (it appears only for level=soft_commit). */
.ioi-field--soft {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 0.0625rem dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
}

/* ------------------------------------------------------------------------
   2a.  LEVEL SELECTOR (segmented radiogroup)
   ------------------------------------------------------------------------ */
.ioi-fieldset--level { background: var(--bg-surface); }

.ioi-levelseg {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 44rem) {
  .ioi-levelseg { grid-template-columns: repeat(3, 1fr); }
}

.ioi-levelseg__opt {
  display: block;
  cursor: pointer;
  min-block-size: 2.75rem;
}

/* Visually hide the radio but keep it operable & focusable. */
.ioi-levelseg__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ioi-levelseg__chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4);
  border: 0.125rem solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.ioi-levelseg__icon {
  font-size: var(--fs-xl);
  color: var(--accent-primary);
}
.ioi-levelseg__label {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-primary);
}
.ioi-levelseg__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Hover (pointer only). */
@media (hover: hover) {
  .ioi-levelseg__opt:hover .ioi-levelseg__chip {
    border-color: var(--accent-primary);
  }
}

/* Selected — color is NOT the only signal: a check glyph + a left accent bar +
   weight change reinforce it (WCAG color-not-alone). */
.ioi-levelseg__input:checked + .ioi-levelseg__chip {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
  box-shadow: inset 0.25rem 0 0 0 var(--accent-primary);
}
.ioi-levelseg__input:checked + .ioi-levelseg__chip .ioi-levelseg__label::after {
  content: " \2713"; /* check mark */
  color: var(--accent-primary);
  font-weight: 700;
}

/* Keyboard focus on the (hidden) radio paints a ring on the visible chip. */
.ioi-levelseg__input:focus-visible + .ioi-levelseg__chip {
  outline: none;
  box-shadow: var(--focus-ring), inset 0.25rem 0 0 0 var(--accent-primary);
}

/* ------------------------------------------------------------------------
   2b.  CHECK ROWS (accreditation + acknowledgment)
   ------------------------------------------------------------------------ */
.ioi-ack { margin-top: var(--space-4); }
.ioi-ack--accred { margin-top: 0; }

.ioi-checkrow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.ioi-checkbox {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  /* Larger touch target without breaking layout. */
  accent-color: var(--accent-primary);
}

.ioi-checkrow__text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-primary);
}

.ioi-checkbox:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ------------------------------------------------------------------------
   2c.  THE STATIC DISCLAIMER (must always be visible & legible)
   ------------------------------------------------------------------------ */
.ioi-disclaimer {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 0.0625rem solid var(--border-strong);
  border-left: 0.25rem solid var(--status-info);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
}
.ioi-disclaimer__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--status-info-text);
}
.ioi-disclaimer__head i { color: var(--status-info-text); }
.ioi-disclaimer__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------------
   2d.  SIGNATURE
   ------------------------------------------------------------------------ */
.ioi-sign-input {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl) !important;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------------
   2e.  INLINE FIELD ERRORS
   ------------------------------------------------------------------------ */
.ioi-error {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--status-error-text);
}
.ioi-error::before {
  content: "\26A0\FE0E"; /* warning sign, text style */
  margin-right: var(--space-1);
}

/* Invalid field outline (border token is the saturated fill, AA-independent). */
.ioi-form [aria-invalid="true"] {
  border-color: var(--status-error);
  box-shadow: 0 0 0 0.0625rem var(--status-error);
}

/* ------------------------------------------------------------------------
   2f.  RECEIPT NOTE + ACTIONS + FORM-LEVEL ERROR
   ------------------------------------------------------------------------ */
.ioi-receipt-note {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
}

.ioi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.ioi-submit { min-height: 2.75rem; }
.ioi-submit[aria-busy="true"] { opacity: 0.75; pointer-events: none; }

.ioi-actions .btn i { margin-right: var(--space-2); }

.ioi-formerror {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--status-error-text);
  border: 0.0625rem solid var(--status-error);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--status-error) 8%, transparent);
}

/* ========================================================================
   3.  SUCCESS SCREEN
   ======================================================================== */
.ioi-success {
  max-width: 40rem;
  margin: var(--space-4) auto 0;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.ioi-success:focus-visible { outline: none; box-shadow: var(--shadow-md), var(--focus-ring); }

.ioi-success__badge {
  font-size: 3rem;
  line-height: 1;
  color: var(--status-success-text);
  margin-bottom: var(--space-4);
}

.ioi-success__h {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}

.ioi-success__body {
  margin: 0 auto var(--space-6);
  max-width: 34rem;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.ioi-success__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0 auto var(--space-6);
  max-width: 30rem;
  padding: var(--space-4);
  text-align: left;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
}
@media (min-width: 36rem) {
  .ioi-success__meta { grid-template-columns: repeat(3, 1fr); }
}
.ioi-success__meta dt {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-0\.5);
}
.ioi-success__meta dd {
  margin: 0;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text-primary);
  word-break: break-word;
}

.ioi-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-6);
}
.ioi-success__actions .btn { min-height: 2.75rem; }
.ioi-success__actions .btn i { margin-right: var(--space-2); }

.ioi-success__legal {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ========================================================================
   4.  DECISION-POINT PANEL  (.vc-proceed)
   Contract classes consumed by FE-PROCEED on deck/exec/plan/learn. Defined
   here (single owner) so every consumer page renders identically. Append-only:
   the panel sits at the natural END of a page, themed + AA like everything else.
   ======================================================================== */
.vc-proceed {
  margin: var(--space-12) auto 0;
  max-width: 60rem;
  padding: var(--space-8) var(--gutter);
  border-top: 0.0625rem solid var(--border-subtle);
}

.vc-proceed__head {
  text-align: center;
  margin-bottom: var(--space-6);
}

.vc-proceed__heading {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
}

.vc-proceed__subheading {
  max-width: 44rem;
  margin: 0 auto;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.vc-proceed__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 38rem) {
  .vc-proceed__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60rem) {
  .vc-proceed__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Each option is an <a> (express/ioi/soft route to the form; dataroom/call
   route to their own hrefs). Full-card click target, ≥2.75rem. */
.vc-proceed__opt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  padding: var(--space-5);
  text-decoration: none;
  color: var(--text-primary);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) {
  .vc-proceed__opt:hover {
    transform: var(--lift);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
  }
}
.vc-proceed__opt:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
}

/* Emphasise the primary path (the standard IOI) without relying on color alone:
   a stronger border + a small "Recommended" pill carry the meaning. */
.vc-proceed__opt--primary {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-sm);
}

.vc-proceed__opt-icon {
  font-size: var(--fs-2xl);
  color: var(--accent-primary);
}

.vc-proceed__opt-label {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.vc-proceed__opt-detail {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.vc-proceed__tag {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--space-0\.5) var(--space-2);
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border-radius: var(--radius-pill);
}

.vc-proceed__cta {
  margin-top: auto;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--accent-primary);
}
.vc-proceed__cta::after {
  content: " \2192"; /* right arrow */
}

.vc-proceed__note {
  margin: var(--space-6) auto 0;
  max-width: 48rem;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ========================================================================
   5.  REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ioi-levelseg__chip,
  .vc-proceed__opt {
    transition: none;
  }
  .vc-proceed__opt:hover {
    transform: none;
  }
}

/* ========================================================================
   6.  PRINT
   ======================================================================== */
@media print {
  .vc-nav,
  .no-print,
  .ioi-actions,
  .ioi-success__actions {
    display: none !important;
  }
  .ioi-body { background: #fff; color: #000; }
  .ioi-fieldset,
  .ioi-success {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }
  /* Always print the disclaimer legibly. */
  .ioi-disclaimer {
    border: 1px solid #999;
    border-left: 3px solid #555;
    background: #fff;
  }
  .ioi-disclaimer__body { color: #000; }
}