/* Policy-page layout — Woytek Auto public policy surfaces.
   Per WA_PKT_BOOKING_UI_POLICY_PAGES_01.

   Theme tokens (colors, fonts, radii, spacing) inherit from book.css
   via the :root variables defined there. This file adds policy-page-
   specific layout only — topbar, container, meta block, section
   scaffold, footer switcher. Link order in privacy.html / terms.html:
   book.css first (tokens), policy.css second (layout).

   Policy bodies are intentionally placeholder zones — the source-of-
   record locked text is dropped in by the policy-lock team in a
   follow-up packet. The "POLICY INSERTS HERE" blocks are visible
   placeholder markers, not legal copy. */

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-stack);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.policy-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Sticky top bar */
.policy-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  padding: 14px var(--page-padding-side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.policy-topbar-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.policy-topbar-wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.policy-topbar-location {
  font-size: 12px;
  color: var(--text-tertiary);
}
.policy-topbar-back {
  background: transparent;
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
  border-radius: var(--radius-input);
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--font-stack);
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
  white-space: nowrap;
}
.policy-topbar-back:hover {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--woytek-brand);
}


/* ============================================================
   Page container */
.policy-container {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px var(--page-padding-side) var(--page-padding-bottom);
  box-sizing: border-box;
}

.policy-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 8px 0 8px;
  color: var(--text-primary);
}
.policy-lede {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 24px;
}


/* ============================================================
   Meta block — Last updated / Policy version / Applies to */
.policy-meta {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 13px;
}
.policy-meta dt {
  color: var(--text-tertiary);
  font-weight: 500;
}
.policy-meta dd {
  margin: 0;
  color: var(--text-primary);
}
.policy-meta dd code {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.policy-meta-placeholder {
  font-style: italic;
  color: var(--text-tertiary);
}


/* ============================================================
   POLICY INSERTS HERE — the prominent owner-team placeholder.
   This is the visible zone where the policy-lock team drops the
   verbatim, source-of-record policy body. Styled to read as a
   build-time hole, not as actual content. */
.policy-insert-zone {
  border: 2px dashed var(--warning);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  margin: 0 0 28px;
  background: rgba(245, 158, 11, 0.05);
  text-align: center;
  color: var(--text-secondary);
}
.policy-insert-zone-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--warning);
  margin: 0 0 8px;
}
.policy-insert-zone-body {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}


/* ============================================================
   Section scaffold — per-section headings + per-section insert blocks. */
.policy-section {
  margin: 0 0 28px;
}
.policy-section-heading {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--divider);
}
.policy-section-insert {
  border: 1px dashed var(--input-border);
  border-radius: var(--radius-input);
  padding: 16px 18px;
  background: var(--input-bg);
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
}
.policy-section-insert-tag {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
}
/* No-show policy gets a softer warning treatment — content owed,
   no source section in WA-L01 yet (per CONSOLIDATE_01_R2 receipt). */
.policy-section--no-source .policy-section-insert {
  border-color: var(--warning);
  background: rgba(245, 158, 11, 0.05);
  color: var(--text-secondary);
}
.policy-section--no-source .policy-section-insert-tag {
  color: var(--warning);
}


/* ============================================================
   Footer — legal-identity + two-way policy switcher + back link */
.policy-footer {
  border-top: 1px solid var(--card-border);
  padding: 24px var(--page-padding-side) 32px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.policy-footer-inner {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.policy-footer-identity {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.policy-footer-identity strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.policy-footer-identity .policy-footer-insert {
  font-style: italic;
  color: var(--text-tertiary);
}
.policy-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.policy-footer-copyright {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
  text-align: center;
}
.policy-switcher {
  display: inline-flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-input);
  overflow: hidden;
  background: var(--input-bg);
}
.policy-switcher a {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  border-right: 1px solid var(--card-border);
  transition: background 100ms, color 100ms;
}
.policy-switcher a:last-child {
  border-right: none;
}
.policy-switcher a:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}
.policy-switcher a.is-current {
  background: var(--woytek-brand);
  color: var(--woytek-brand-text-on);
  cursor: default;
  pointer-events: none;
}
.policy-back-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  transition: background 100ms, color 100ms, border-color 100ms;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-stack);
}
.policy-back-link:hover {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--woytek-brand);
}


/* ============================================================
   Mobile (≤640px) — single column, tighter spacing */
@media (max-width: 640px) {
  .policy-container {
    padding: 24px 16px 32px;
  }
  .policy-title { font-size: 24px; }
  .policy-meta { grid-template-columns: 1fr; gap: 2px 0; }
  .policy-meta dt { margin-top: 8px; }
  .policy-meta dt:first-of-type { margin-top: 0; }
  .policy-topbar { padding: 12px 16px; }
  .policy-footer { padding: 20px 16px 28px; }
  .policy-footer-actions { flex-direction: column; align-items: stretch; }
  .policy-switcher { width: 100%; justify-content: center; }
  .policy-switcher a { flex: 1; text-align: center; }
  .policy-back-link { text-align: center; }
}