/* ========================================================================
   term-sheet.css — page-unique layout for the Series B indicative term sheet
   RetirePlusPlus Investor Module ($30M Series B)

   Token-driven (consumes vc-tokens.css semantic roles). No raw hex, no
   :root/[data-theme] palette blocks (those live in vc-tokens.css; legacy var
   names preserved by vc-aliases.css). Shared chrome — nav, confidential
   banner, footer, buttons, badges — comes from vc-components.css. This file
   styles ONLY the term-sheet document body + the editable affordance + print.
   CSP-clean: no inline styles; the only dynamic styling is none (static page).
   ======================================================================== */

/* Skip link — sits above the fixed nav when focused */
.ts-skip {
  top: var(--space-2);
  left: var(--space-2);
  z-index: 400;
}

/* ----------------------------------------------------------------------- *
   Document shell
   ----------------------------------------------------------------------- */
.term-sheet {
  max-width: var(--max-width-prose);
  margin: 0 auto;
  /* clear the fixed nav + confidential banner */
  padding: calc(var(--header-height) + var(--space-8)) var(--gutter) var(--space-16);
}

/* ----------------------------------------------------------------------- *
   Header
   ----------------------------------------------------------------------- */
.term-header {
  text-align: center;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 0.125rem solid var(--border-brand);
}

.ts-header-badge {
  margin-bottom: var(--space-4);
}

.term-title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.term-subtitle {
  font-family: var(--font-data);
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
}

.term-subtitle--meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* "Illustrative — for discussion" treatment (build spec §5) */
.illustrative-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) auto 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-partner);
  background: color-mix(in srgb, var(--accent-partner) 12%, transparent);
  border: 0.0625rem solid color-mix(in srgb, var(--accent-partner) 35%, transparent);
}
.illustrative-note i { font-size: var(--fs-sm); }

/* Editable-fields hint banner */
.editable-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

/* ----------------------------------------------------------------------- *
   Term sections (label / value rows)
   ----------------------------------------------------------------------- */
.term-section {
  margin-bottom: var(--space-8);
}

.term-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent-primary);
  border-bottom: 0.0625rem solid var(--border-subtle);
  padding-bottom: var(--space-2);
  margin: 0 0 var(--space-4);
}
.term-section__title i { font-size: var(--fs-lg); }

.term-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 0.0625rem solid var(--border-subtle);
}
.term-row:last-child { border-bottom: 0; }

.term-label {
  width: 12.5rem;
  flex-shrink: 0;
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.term-value {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-primary);
}

/* parenthetical note inside a value (e.g. "based on fully diluted cap") */
.term-value__note {
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------- *
   Editable affordance — NOT color-only (design §5.5): a dotted underline +
   subtle inset surface mark every editable field. Numeric fields use the
   data font + tabular figures so seeded JSON values line up.
   ----------------------------------------------------------------------- */
.editable {
  display: inline-block;
  min-width: 2.75rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  color: var(--accent-primary);
  font-weight: 600;
  /* dotted underline = the non-color affordance */
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.09em;
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  cursor: text;
  transition: background var(--dur-fast) var(--ease-standard);
}
.editable:hover {
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.editable:focus,
.editable:focus-visible {
  outline: 0.125rem solid transparent;       /* kept for forced-colors */
  box-shadow: var(--focus-ring);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
}

/* numeric editable fields: data font + tabular figures */
.editable--num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------- *
   Signatures
   ----------------------------------------------------------------------- */
.signature-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 0.125rem solid var(--border-subtle);
}

.signature-block { padding-top: var(--space-4); }

.sig-label {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
}

.sig-line {
  border-bottom: 0.0625rem solid var(--border-strong);
  margin-bottom: var(--space-2);
  min-height: 2.5rem;
}

.sig-name {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
}
.sig-date { margin-top: var(--space-2); color: var(--text-muted); }

/* ----------------------------------------------------------------------- *
   Closing notice + actions
   ----------------------------------------------------------------------- */
.notice {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin: var(--space-10) auto 0;
  padding-top: var(--space-4);
  border-top: 0.0625rem solid var(--border-subtle);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin: var(--space-10) 0 0;
}

/* ----------------------------------------------------------------------- *
   Responsive
   ----------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .term-row {
    flex-direction: column;
    gap: var(--space-1);
  }
  .term-label { width: 100%; }
  .signature-section { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ----------------------------------------------------------------------- *
   Reduced motion
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .editable { transition: none; }
}

/* ----------------------------------------------------------------------- *
   Print — clean, lawyer-shaped document. Editable affordances disappear and
   seeded values print as plain static text. Chrome (nav/banner/footer/hints/
   actions) is hidden; the document reads as a single black-on-white sheet.
   ----------------------------------------------------------------------- */
@media print {
  .editable-hint,
  .actions,
  .ts-skip { display: none !important; }

  .term-sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    color: #000;
  }

  .term-title,
  .term-section__title,
  .term-value,
  .term-label,
  .term-subtitle,
  .sig-name,
  .sig-label { color: #000; }

  .term-section__title {
    border-bottom-color: #000;
  }
  .term-header { border-bottom-color: #000; }
  .term-row { border-bottom-color: #ddd; }
  .signature-section { border-top-color: #000; }
  .notice { border-top-color: #ddd; color: #333; }

  /* editable fields print as plain text — no underline, no fill, no box */
  .editable {
    color: #000 !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: 600;
  }

  .sig-line { border-bottom-color: #000; }

  /* keep the illustrative label visible in print (it's a required treatment) */
  .illustrative-note {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #000 !important;
    background: transparent !important;
    border-color: #999 !important;
  }

  .term-section { page-break-inside: avoid; }
  .signature-section { page-break-inside: avoid; }
}