/* /guides/outbound-system/ — page styles. Composes content.css + stratamize-core.css.
   Tokens only (var(--stz-*)); no new --stz-* names; private props use --_x; no motion.
   Square corners throughout, matching .resource-note, .prose pre and .prose table in content.css.
   No status colours: the crimson accent rule marks at most one block per phase; labels carry the rest. */
.guide-page .resource-summary { max-width: 66ch; }
.guide-meta { display: flex; flex-wrap: wrap; gap: var(--stz-space-2) var(--stz-space-5); margin: var(--stz-space-5) 0 0; color: var(--stz-text-muted); font-size: var(--stz-size-caption); }
.guide-meta time { color: var(--stz-text); }
.guide-prose > section + section { margin-top: var(--stz-space-11); padding-top: var(--stz-space-8); border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.guide-prose section > h2 { margin-top: 0; }
.guide-prose .guide-kicker { display: inline-block; margin: 0 0 var(--stz-space-2); color: var(--stz-accent-text); }
.guide-prose .guide-lede { font-size: var(--stz-size-lead); line-height: var(--stz-lh-lead); color: var(--stz-text-muted); max-width: 64ch; }
.guide-prose ul.guide-plain, .guide-prose ol.guide-plain { padding-left: var(--stz-space-5); }
.guide-prose dl.guide-defs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--stz-space-2) var(--stz-space-5); margin: var(--stz-space-5) 0; }
.guide-prose dl.guide-defs dt { font-weight: var(--stz-weight-medium); }
.guide-prose dl.guide-defs dd { margin: 0; color: var(--stz-text-muted); }
.resource-toc ul ul { margin-top: var(--stz-space-2); }

/* Callout: the site's note pattern (content.css .resource-note): a 3px crimson rule and a label. */
.guide-callout { display: grid; gap: var(--stz-space-2); margin-block: var(--stz-space-6); padding: var(--stz-space-5) var(--stz-space-6); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); border-left: 3px solid var(--stz-accent-decor); background: var(--stz-surface-panel); }
.guide-callout > :last-child { margin-bottom: 0; }
.guide-callout__label { color: var(--stz-text); font-size: var(--stz-size-small); font-weight: var(--stz-weight-medium); }
.guide-prose .guide-callout dl.guide-defs { margin: 0; }

/* Stat tiles: homepage founder-stat pattern (1px gap tiles, one brand tile at most). */
.guide-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--stz-space-1); margin-block: var(--stz-space-6); }
.guide-stat { padding: var(--stz-space-6); background: var(--stz-surface-panel); }
.guide-stat strong { display: block; color: var(--stz-text); font-size: var(--stz-size-h1); font-weight: var(--stz-weight-medium); line-height: var(--stz-leading-display); letter-spacing: var(--stz-tracking-h1); }
.guide-prose .guide-stat p { margin: var(--stz-space-2) 0 0; font-size: var(--stz-size-label); line-height: var(--stz-leading-dense); color: var(--stz-text-muted); }
.guide-stat--brand { background: var(--stz-surface-brand); color: var(--stz-on-surface-brand); }
.guide-stat--brand strong, .guide-prose .guide-stat--brand p { color: inherit; }

/* Principles: four rules, two by two. */
.guide-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-4); margin: var(--stz-space-6) 0; padding: 0; list-style: none; }
.guide-prose .guide-rules > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--stz-space-4); margin: 0; padding: var(--stz-space-5); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); background: var(--stz-surface-panel); font-size: var(--stz-size-body-sm); }
.guide-rules .stz-numeral-outline { font-size: var(--stz-size-h3); line-height: 1; }
.guide-prose .guide-rules strong { display: block; color: var(--stz-text); margin-bottom: var(--stz-space-1); }

/* System map: a CSS grid that reads left to right on wide screens and top to bottom on phones. */
.guide-figure { margin: var(--stz-space-6) 0; padding: var(--stz-space-5); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); background: var(--stz-surface-panel); }
.guide-figure figcaption { margin-top: var(--stz-space-4); color: var(--stz-text-muted); font-size: var(--stz-size-caption); }
.guide-map { --_arrow: "\2193"; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-3); align-items: stretch; }
.guide-map__col { display: grid; grid-template-rows: auto 1fr auto; gap: var(--stz-space-3); min-width: 0; padding: var(--stz-space-4); border: var(--stz-border-width-hairline) solid var(--stz-border-default); background: var(--stz-surface-raised); }
.guide-prose .guide-map__head { margin: 0; color: var(--stz-text); font-size: var(--stz-size-label); font-weight: var(--stz-weight-medium); letter-spacing: var(--stz-tracking-overline); text-transform: uppercase; }
.guide-prose .guide-map__head small { display: block; margin-top: var(--stz-space-1); color: var(--stz-text-muted); font-weight: var(--stz-weight-regular); letter-spacing: var(--stz-tracking-normal); text-transform: none; font-size: var(--stz-size-caption); }
.guide-prose .guide-map__nodes { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--stz-space-2); align-content: start; }
.guide-prose .guide-map__nodes li { margin: 0; padding: var(--stz-space-2) var(--stz-space-3); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); background: var(--stz-surface-panel); font-size: var(--stz-size-caption); line-height: var(--stz-leading-dense); }
.guide-prose .guide-map__nodes li.is-human { border-color: var(--stz-surface-brand); background: var(--stz-surface-brand); color: var(--stz-on-surface-brand); font-weight: var(--stz-weight-medium); }
.guide-prose .guide-map__out { margin: 0; padding-top: var(--stz-space-2); border-top: var(--stz-border-width-hairline) solid var(--stz-border-hairline); color: var(--stz-text-muted); font-size: var(--stz-size-micro); line-height: var(--stz-leading-dense); }
.guide-map__arrow { align-self: center; justify-self: center; color: var(--stz-accent-decor); font-size: var(--stz-size-h4); line-height: 1; }
.guide-map__arrow::before { content: var(--_arrow); }
.guide-map__arrow--down { --_arrow: "\2193"; }
.guide-prose .guide-map__loop, .guide-prose .guide-map__base { grid-column: 1 / -1; margin: 0; padding: var(--stz-space-3) var(--stz-space-4); font-size: var(--stz-size-caption); line-height: var(--stz-leading-dense); }
.guide-prose .guide-map__loop { border: var(--stz-border-width-hairline) dashed var(--stz-border-strong); color: var(--stz-text-muted); }
.guide-prose .guide-map__base { border: var(--stz-border-width-hairline) solid var(--stz-border-default); background: var(--stz-surface-raised); }
.guide-prose .guide-map__loop strong, .guide-prose .guide-map__base strong { color: var(--stz-text); }
/* Wide screens: Find -> Verify -> Organize on the first row, then Approve and send -> Learn on the second. */
@media (min-width: 1101px) {
  .guide-map { --_arrow: "\2192"; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .guide-map__arrow--down { grid-column: 1 / -1; }
  .guide-map__col--wide { grid-column: 1 / 4; }
  .guide-prose .guide-map__col--wide .guide-map__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-prose .guide-map__col--wide .guide-map__nodes li.is-human { grid-column: 1 / -1; }
}

/* Phase sections: numeral + title, then Steps / Checkpoint / Templates / Pitfalls.
   The numeral is capped at the h1 size, the same scale the home page uses for its outline numerals. */
.guide-phase__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--stz-space-5); align-items: start; margin-bottom: var(--stz-space-6); }
.guide-phase__head .stz-numeral-outline { font-size: var(--stz-size-h1); line-height: var(--stz-leading-display); }
.guide-prose .guide-phase__head h2 { margin: 0 0 var(--stz-space-2); }
.guide-prose .guide-phase__head p { margin: 0; color: var(--stz-text-muted); max-width: 62ch; }
.guide-phase__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--stz-space-4); align-items: start; }
.guide-phase__side { display: grid; gap: var(--stz-space-4); align-content: start; min-width: 0; }
.guide-block { min-width: 0; padding: var(--stz-space-5) var(--stz-space-6); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); background: var(--stz-surface-panel); }
.guide-block--check { border-left: 3px solid var(--stz-accent-decor); }
.guide-prose .guide-block h3 { margin: 0 0 var(--stz-space-3); color: var(--stz-text-muted); font-size: var(--stz-size-label); font-weight: var(--stz-weight-medium); letter-spacing: var(--stz-tracking-overline); text-transform: uppercase; }
.guide-prose .guide-block h4 { margin: var(--stz-space-5) 0 var(--stz-space-2); font-size: var(--stz-size-body); }
.guide-prose .guide-block p, .guide-prose .guide-block ul, .guide-prose .guide-block ol { font-size: var(--stz-size-body-sm); line-height: var(--stz-leading-body); margin-bottom: var(--stz-space-3); }
.guide-prose .guide-block > :last-child { margin-bottom: 0; }
.guide-prose .guide-block ol { padding-left: var(--stz-space-5); }
.guide-prose .guide-block ul { padding-left: var(--stz-space-4); }
.guide-prose .guide-block li { margin-bottom: var(--stz-space-2); }
.guide-prose .guide-block pre { margin: var(--stz-space-3) 0; }
@media (max-width: 900px) { .guide-phase__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .guide-phase__head { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-2); } .guide-block { padding: var(--stz-space-4); } .guide-rules { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .resource-note h2 { font-size: min(var(--stz-size-h2), 8.5vw); } }

/* Guards: two tiers, side by side on wide screens. */
.guide-guards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--stz-space-4); margin: var(--stz-space-5) 0; }
.guide-guards > div { min-width: 0; padding: var(--stz-space-5); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); background: var(--stz-surface-raised); }
.guide-prose .guide-guards h4 { margin: 0 0 var(--stz-space-3); font-size: var(--stz-size-body); }
.guide-prose .guide-guards ol { margin: 0; padding-left: var(--stz-space-5); font-size: var(--stz-size-body-sm); }
.guide-prose .guide-guards li { margin-bottom: var(--stz-space-2); }
.guide-prose .guide-guards li strong { color: var(--stz-text); }

/* Compliance box */
.guide-compliance { margin-block: var(--stz-space-6); padding: var(--stz-space-6); border: var(--stz-border-width-strong) solid var(--stz-accent-decor); background: var(--stz-surface-panel); }
.guide-prose .guide-compliance h3 { margin: 0 0 var(--stz-space-4); font-size: var(--stz-size-h5); }
.guide-prose .guide-compliance ul { padding-left: var(--stz-space-5); }
.guide-prose .guide-compliance > :last-child { margin-bottom: 0; }
.guide-prose .guide-compliance .guide-fineprint { color: var(--stz-text-muted); font-size: var(--stz-size-caption); }

/* Tables: keep real table semantics (content.css makes .prose table display:block). */
.guide-table-scroll { overflow-x: auto; margin-block: var(--stz-space-5); border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.guide-prose .guide-table-scroll table { display: table; min-width: 640px; margin: 0; }
.guide-prose .guide-table-scroll th, .guide-prose .guide-table-scroll td { border-width: 0 0 var(--stz-border-width-hairline); vertical-align: top; overflow-wrap: normal; }
.guide-prose .guide-table-scroll th[scope="row"] { white-space: nowrap; }
.guide-prose .guide-table-scroll tr:last-child td { border-bottom: 0; }
.guide-prose .guide-table-scroll th { color: var(--stz-text); font-weight: var(--stz-weight-medium); }
.guide-prose .guide-table-scroll--wide table { min-width: 820px; }

/* Code: plain monospace, as on the other help pages; no chip. */
.guide-prose pre, .guide-prose code, .guide-prose kbd { font-family: var(--stz-font-utility); }
.guide-prose :not(pre) > code { font-size: var(--stz-size-small); }
.guide-prose pre { border: var(--stz-border-width-hairline) solid var(--stz-border-hairline); line-height: var(--stz-leading-dense); }
.guide-prose pre code { font-size: var(--stz-size-label); }
.guide-prose .guide-template { margin-top: var(--stz-space-8); }
.guide-prose .guide-template h3 { margin-top: 0; }
.guide-prose .guide-template > p:first-of-type { color: var(--stz-text-muted); font-size: var(--stz-size-body-sm); }

@media (max-width: 850px) { .guide-prose > section + section { margin-top: var(--stz-space-9); padding-top: var(--stz-space-6); } .guide-prose dl.guide-defs { grid-template-columns: minmax(0, 1fr); gap: var(--stz-space-1); } .guide-prose dl.guide-defs dd { margin-bottom: var(--stz-space-3); } }
@media print { .guide-callout, .guide-figure, .guide-table-scroll, .guide-block, .guide-compliance, .guide-guards > div { break-inside: avoid; } .guide-map { --_arrow: "\2193"; grid-template-columns: minmax(0, 1fr); } .guide-map__arrow--down, .guide-map__col--wide { grid-column: auto; } .guide-prose .guide-map__col--wide .guide-map__nodes { grid-template-columns: minmax(0, 1fr); } }
