/* ============================================================================
   PAGES — shared chrome for static content pages (legal, contact).
   Reuses tokens.css; loaded alongside base.css on each static page.
   ========================================================================== */

.page-wrap {
  width: min(760px, 100% - 2 * var(--space-4));
  margin-inline: auto;
  padding: var(--space-8) 0 var(--space-12);
}

.page-nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--navy-700);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}
.page-nav a {
  color: var(--ink-300);
}
.page-nav a:hover {
  color: var(--gold-300);
}
.page-nav .home {
  color: var(--gold-500);
  font-family: var(--font-display);
  font-weight: 700;
}

.legal h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}
.legal h2 {
  font-size: var(--text-lg);
  margin: var(--space-8) 0 var(--space-3);
  color: var(--gold-300);
}
.legal p,
.legal li {
  color: var(--ink-300);
  margin-bottom: var(--space-3);
}
.legal strong {
  color: var(--ink-100);
}
.legal ul,
.legal ol {
  padding-left: var(--space-6);
}
.legal .updated {
  color: var(--ink-500);
  font-size: var(--text-sm);
}

/* Placeholders the operator must fill in — visually loud so none are missed */
.ph {
  background: color-mix(in srgb, var(--gold-500) 18%, var(--navy-900));
  border: 1px dashed var(--gold-500);
  color: var(--gold-300);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-family: var(--font-display);
  font-size: 0.92em;
}
.editor-note {
  background: color-mix(in srgb, var(--danger) 10%, var(--navy-900));
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin: var(--space-4) 0;
}
.editor-note strong {
  color: var(--danger);
}

/* --- Feedback form --- */
.feedback-card {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  margin-top: var(--space-6);
}
.feedback-card textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  color: var(--ink-100);
  font: inherit;
  padding: var(--space-3);
}
.feedback-card textarea:focus-visible {
  border-color: var(--gold-500);
}
.fb-label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-300);
}
.fb-optional {
  color: var(--ink-500);
  font-weight: 400;
}
.feedback-card .fb-email {
  width: 100%;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  color: var(--ink-100);
  font: inherit;
  padding: var(--space-3);
}
.feedback-card .fb-email:focus-visible {
  border-color: var(--gold-500);
}
.form-status a {
  color: var(--gold-300);
}
.feedback-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.char-count {
  color: var(--ink-500);
  font-size: var(--text-xs);
}
.privacy-note {
  color: var(--ink-500);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
  border-top: 1px dashed var(--navy-700);
  padding-top: var(--space-3);
}
.form-status {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  min-height: 1.4em;
}
.form-status.ok {
  color: var(--cat-lifestyle);
}
.form-status.err {
  color: var(--danger);
}