/**
 * Privacy Policy Generator — tool styles
 *
 * Layout, the document preview, and the two source panes. Cards, tabs, steps,
 * accordions, checkboxes and form controls are all frikwork's. The one
 * frikwork rule reshaped here is .fw-output, and only inside this tool's
 * panes — see the note on that block.
 */

/* --- Progress + page layout ------------------------------------------------ */

.privacy-progress { margin-bottom: var(--fw-space-lg); }
.privacy-steps { padding-block: var(--fw-space-xs); }

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

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

/* The columns space their panels with flex gap, so drop app.css's stacking
   margin or every gap between two panels is counted twice. */
.privacy-form .app-panel + .app-panel,
.privacy-results .app-panel + .app-panel { margin-top: 0; }

.privacy-note .app-panel__body {
  padding-top: var(--fw-space-md);
  padding-bottom: var(--fw-space-md);
}

/* --- Options --------------------------------------------------------------- */

.privacy-group + .privacy-group { margin-top: var(--fw-space-md); }
.privacy-group > summary { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.privacy-group .fw-accordion__body { display: flex; flex-direction: column; gap: 0.1rem; }

.privacy-generate { margin-top: var(--fw-space-lg); }

/* frikwork ships .is-invalid for the failure state; the matching "this one is
   fine" mark is ours, scoped so it cannot colour another tool's inputs. */
.privacy-form .fw-input.is-valid,
.privacy-form .fw-select.is-valid { border-color: var(--fw-brand); }

/* --- Output panes ---------------------------------------------------------- */

.privacy-pane { padding-top: var(--fw-space-md); }

.privacy-scroll {
  min-height: 25rem;
  max-height: 38rem;
  overflow-y: auto;
  padding: var(--fw-space-lg);
  background: var(--fw-bg-2);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}

/* ccm_output_block() renders frikwork's .fw-output, an inline-block chip sized
   for a single computed value. A whole policy needs a block scroll box, so it
   is reshaped — inside .privacy-pane only, so no other .fw-output on the site
   changes shape. */
.privacy-pane .app-output { margin-top: 0; }
.privacy-pane .app-output .fw-output {
  display: block;
  width: 100%;
  max-height: 38rem;
  overflow: auto;
  padding: var(--fw-space-md);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--fw-bg-2);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}

.privacy-scroll,
.privacy-pane .app-output .fw-output {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fw-brand) 45%, transparent) transparent;
}
.privacy-scroll::-webkit-scrollbar,
.privacy-pane .app-output .fw-output::-webkit-scrollbar { width: 8px; height: 8px; }
.privacy-scroll::-webkit-scrollbar-track,
.privacy-pane .app-output .fw-output::-webkit-scrollbar-track { background: transparent; }
.privacy-scroll::-webkit-scrollbar-thumb,
.privacy-pane .app-output .fw-output::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fw-brand) 35%, transparent);
  border-radius: var(--fw-radius-pill);
}

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

/* --- The rendered policy ---------------------------------------------------
 *
 * The .policy-* class names are not a namespacing slip: they are part of the
 * document the tool exports, and the "Copy HTML" output styles them by name
 * for the client's site. Renaming them would change what gets pasted, so they
 * stay, scoped under .privacy-doc where they cannot reach anything else.
 */

.privacy-doc {
  max-width: 78ch;
  margin-inline: auto;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--fw-text-2);
}

.privacy-doc .policy-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--fw-brand) 30%, transparent);
}
.privacy-doc .policy-header h1 {
  color: var(--fw-brand-text);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  border: 0;
  padding: 0;
}
.privacy-doc .policy-meta { color: var(--fw-text-muted); font-size: 0.9rem; }

.privacy-doc .policy-section { margin-bottom: 2rem; }
.privacy-doc .policy-section:last-child { margin-bottom: 0; }

.privacy-doc h2 {
  color: var(--fw-brand-text);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--fw-brand) 30%, transparent);
}
.privacy-doc h3 {
  color: var(--fw-text);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}
.privacy-doc p { margin-bottom: 1rem; }
.privacy-doc ul,
.privacy-doc ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.privacy-doc li { margin-bottom: 0.5rem; }
.privacy-doc strong { color: var(--fw-brand-text); font-weight: 600; }
.privacy-doc a {
  color: var(--fw-brand-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--fw-brand) 30%, transparent);
  transition: color var(--fw-dur-fast) ease, border-color var(--fw-dur-fast) ease;
}
.privacy-doc a:hover { color: var(--fw-text); border-bottom-color: var(--fw-text); }

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

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

@media (max-width: 768px) {
  .privacy-scroll { padding: var(--fw-space-md); }
  .privacy-doc { font-size: 0.9rem; }
  .privacy-doc h2 { font-size: 1.3rem; }
  .privacy-doc h3 { font-size: 1.1rem; }
  .privacy-doc .policy-header h1 { font-size: 1.5rem; }
}

/* --- Print -----------------------------------------------------------------
 *
 * Printing a policy is a real workflow (a client wants it on paper before they
 * sign it off), so the page collapses to just the document: no controls, no
 * tab bar, no scroll clipping. Colours are left to the theme tokens — the
 * browser's own "background graphics" setting decides the rest.
 */

@media print {
  .privacy-progress,
  .privacy-form,
  .privacy-note,
  .privacy-stats,
  .privacy-views .fw-tabs,
  .app-panel__actions { display: none; }

  .privacy-layout { display: block; }
  .privacy-pane { display: none; padding-top: 0; }
  .privacy-pane--doc { display: block; }

  .privacy-scroll {
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: none;
  }
  .privacy-doc { max-width: none; }
}