/**
 * Terms & Conditions Generator — tool styles
 *
 * Layout, plus a typographic scale for the generated document. Cards, fields,
 * checkboxes, alerts, steps and the accordion all come from frikwork; nothing
 * here restyles a frikwork component.
 *
 * The document markup uses `policy-*` class names. Those are not ours to
 * rename — they go out in the "Copy HTML" export and land in customer sites,
 * so they are part of the export contract. Every rule below is scoped under
 * `.terms-doc` so they cannot leak into another tool.
 */

.terms-layout {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

/* The stepper reads as a header for both columns, so it spans them. */
.terms-progress {
  grid-column: 1 / -1;
  margin-bottom: var(--fw-space-xs);
}

.terms-form,
.terms-results {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);
}

/* --- Option lists ---------------------------------------------------------- */

.terms-choices { margin-bottom: 0; }

/* Each row is label + hint stacked, so align the box with the first line
   rather than the centre of the whole block. */
.terms-choice { align-items: flex-start; }
.terms-choice input { margin-top: 0.2rem; }
.terms-choice strong { display: block; font-weight: 600; }
.terms-choice small { display: block; margin-top: 0.1rem; }

.terms-generate { margin-top: var(--fw-space-md); }

/* --- The generated document ------------------------------------------------ */

.terms-doc {
  min-height: 400px;
  max-height: 640px;
  overflow-y: auto;
  padding: var(--fw-space-lg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
  line-height: 1.8;
}

.terms-doc:focus-visible { outline: 2px solid var(--fw-brand); outline-offset: 2px; }
.terms-doc--populated { border-color: var(--fw-brand); }

.terms-doc h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--fw-brand-text);
}

.terms-doc h2 {
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fw-brand-text);
  border-bottom: 2px solid var(--fw-border);
}

.terms-doc h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fw-text);
}

.terms-doc p {
  margin-bottom: 1rem;
  color: var(--fw-text-2);
}

.terms-doc ul,
.terms-doc ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: var(--fw-text-2);
}

.terms-doc li { margin-bottom: 0.5rem; }

.terms-doc a {
  color: var(--fw-brand-text);
  text-decoration: none;
  border-bottom: 1px solid var(--fw-border);
}
.terms-doc a:hover { border-bottom-color: var(--fw-brand); }

.terms-doc strong { color: var(--fw-brand-text); font-weight: 600; }

.terms-doc .policy-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  text-align: center;
  border-bottom: 2px solid var(--fw-brand);
}

.terms-doc .policy-meta {
  color: var(--fw-text-muted);
  font-size: 0.9rem;
}

.terms-doc .policy-section { margin-bottom: 2rem; }

/* The empty state ships its own centring; strip the document's inherited
   heading colours off it. */
.terms-doc .app-empty p { color: var(--fw-text-muted); }

/* --- Stats, outline, disclaimer -------------------------------------------- */

.terms-stats { margin-top: var(--fw-space-lg); }
.terms-stats .app-stat { padding: var(--fw-space-md); }
.terms-stats .app-stat__value { font-size: 1.35rem; }

.terms-outline { margin-top: var(--fw-space-lg); }
.terms-outline__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}
.terms-outline__list li { margin-bottom: 0.25rem; }

.terms-disclaimer { margin-top: var(--fw-space-lg); }

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
  .terms-layout { grid-template-columns: 1fr; }
  .terms-doc { max-height: 480px; }
}

@media (max-width: 640px) {
  .terms-doc { padding: var(--fw-space-md); font-size: 0.9rem; }
  .terms-doc h1 { font-size: 1.5rem; }
  .terms-doc h2 { font-size: 1.2rem; }
  .terms-doc h3 { font-size: 1rem; }
}

/* --- Print -----------------------------------------------------------------
 * Printing the page should print the document, not a scroll window of it.
 */
@media print {
  .terms-doc {
    max-height: none;
    overflow: visible;
    border: none;
    background: none;
  }
}