/* ---------------------------------------------------------------------------
   MissionAlarm marketing site — doc.css
   Document layout for privacy.html, terms.html and support.html.

   Load order on those pages is tokens.css, then site.css, then this file.
   site.css supplies the header, the footer, the skip link, the reset and the
   buttons, so those are deliberately absent here and must not be re-declared:
   the legal pages have to keep matching the landing page when it changes.
   This file adds only what a long prose document needs on top of that, and
   every value still comes from tokens.css.
   --------------------------------------------------------------------------- */

/* --- prose defaults, re-asserted over the site reset ---------------------- */

a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text-primary); }

/* --- current page in the shared nav ---------------------------------------- */

.head-nav a.navlink[aria-current="page"],
.foot-nav a[aria-current="page"] { color: var(--acid); }

/* --- document shell ------------------------------------------------------
   .site-head is position: fixed in site.css, so the column clears it here
   rather than the landing page's hero doing it.
   -------------------------------------------------------------------------- */

.doc {
  max-width: 68ch;
  margin: 0 auto;
  padding: calc(var(--space-huge) + var(--space-xxl)) var(--space-gutter) var(--space-huge);
}

.doc-head { border-bottom: var(--border-control) solid var(--smoke); padding-bottom: var(--space-xl); }
.doc .eyebrow { display: block; margin: 0; }

.doc h1 {
  font-family: var(--font-display);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--display-line);
  letter-spacing: var(--display-tracking);
  margin: var(--space-sm) 0 0;
}

.doc .lede {
  font-family: var(--font-body);
  font-size: var(--title-size);
  font-weight: 400;
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  color: var(--text-primary);
  margin: var(--space-md) 0 0;
}

.doc .meta {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
  margin: var(--space-lg) 0 0;
}

.doc h2 {
  font-family: var(--font-display);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-line);
  letter-spacing: var(--headline-tracking);
  margin: var(--space-huge) 0 var(--space-md);
  padding-top: var(--space-xl);
  border-top: var(--border-hairline) solid var(--smoke);
}
.doc h2 .num {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  letter-spacing: var(--mono-label-tracking);
  color: var(--acid);
  display: block;
  margin-bottom: var(--space-xs);
}

.doc h3 {
  font-family: var(--font-body);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  margin: var(--space-xl) 0 var(--space-xs);
}

.doc p { margin: 0 0 var(--space-md); line-height: var(--space-xl); }
.doc p:last-child { margin-bottom: 0; }

.doc strong { font-weight: var(--body-bold-weight); color: var(--text-primary); }
.doc em { font-style: normal; color: var(--acid); }

.doc ul, .doc ol { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li { margin-bottom: var(--space-xs); line-height: var(--space-xl); }
.doc li:last-child { margin-bottom: 0; }
.doc ul li::marker { color: var(--acid); }
.doc ol li::marker { color: var(--acid); font-family: var(--font-mono); }

.doc hr { border: 0; border-top: var(--border-hairline) solid var(--smoke); margin: var(--space-xxl) 0; }

.doc code {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  background: var(--surface-float);
  padding: 2px var(--space-xxs);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.doc .muted { color: var(--text-secondary-accessible); }
.doc .caption { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--text-secondary-accessible); }

/* --- table of contents ---------------------------------------------------- */

.toc {
  background: var(--surface-raised);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin: var(--space-xxl) 0;
}
.toc h2 {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
}
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin-bottom: var(--space-xxs); }
.toc a { text-decoration: none; color: var(--text-primary); }
.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  color: var(--acid);
}
.toc a:hover { color: var(--acid); }

/* --- callouts -------------------------------------------------------------- */

.callout {
  background: var(--surface-raised);
  border-left: var(--size-mission-stripe-width) solid var(--acid);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}
.callout .callout-title {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--acid);
  display: block;
  margin-bottom: var(--space-xs);
}
.callout.critical { border-left-color: var(--blaze); background: var(--surface-alarm); }
.callout.critical .callout-title { color: var(--blaze); }

/* --- placeholders that must never ship ------------------------------------
   Blaze, dashed, uppercase mono. Loud on purpose: nothing in square brackets
   is allowed to reach the App Store review.
   -------------------------------------------------------------------------- */

.ph {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  font-weight: 600;
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--blaze);
  background: var(--tint-blaze-wash);
  border: var(--border-control) dashed var(--blaze);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-xs);
  white-space: nowrap;
}

.ph-notice {
  background: var(--tint-blaze-wash);
  border: var(--border-control) dashed var(--blaze);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0 0;
}
.ph-notice .callout-title { color: var(--blaze); margin-bottom: var(--space-xs); }
.ph-notice p { margin: 0; font-size: var(--caption-size); line-height: var(--caption-line); color: var(--text-primary); }

/* --- numbered procedure ---------------------------------------------------- */

.doc ol.steps { list-style: none; padding: 0; margin: var(--space-lg) 0; counter-reset: step; }
.doc ol.steps > li {
  position: relative;
  padding-left: var(--space-xxxl);
  margin-bottom: var(--space-lg);
}
.doc ol.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  font-weight: 600;
  letter-spacing: var(--mono-label-tracking);
  color: var(--acid);
}
.doc ol.steps > li .step-title { font-weight: var(--body-bold-weight); display: block; margin-bottom: var(--space-xxs); }
.doc ol.steps > li p { margin-bottom: var(--space-xs); }

/* --- table ----------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: var(--space-lg) 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--body-size); }
.doc th, .doc td {
  text-align: left;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--border-hairline) solid var(--smoke);
  vertical-align: top;
}
.doc th {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
}

/* --- small screens ---------------------------------------------------------
   720px matches site.css, where the header nav links drop out.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .doc h1 {
    font-size: var(--display-mobile-size);
    line-height: var(--display-mobile-line);
    letter-spacing: var(--display-mobile-tracking);
  }
  .doc { padding: calc(var(--space-xxl) + var(--space-xxl)) var(--space-md) var(--space-xxl); }
}

/* --- print: App Review and the founder may both want a PDF ------------------ */

@media print {
  .toc { display: none; }
  .doc { max-width: none; padding: 0; }
  .doc a { color: #000; }
  .callout { border: 1px solid #000; background: none; }
  .ph { color: #000; border: 1px dashed #000; background: none; }
}