/* Document styles for public-docs. Brand values come from stepful-tokens.css
   (SDS); this file only lays out the markdown-generated HTML. */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Badge palettes: Chakra 100/800 scales that SDS badge subtle variants build on */
  --badge-green-bg: #c6f6d5;  --badge-green-fg: #22543d;
  --badge-orange-bg: #feebc8; --badge-orange-fg: #7b341e;
  --badge-purple-bg: #e9d8fd; --badge-purple-fg: #44337a;
  --badge-gray-bg: #edf2f7;   --badge-gray-fg: #2d3748;
  color-scheme: light;
}

body { background: var(--sds-bg-brand); color: var(--sds-text-primary);
       font-family: var(--sds-font-body); line-height: 1.6; font-size: 16px; }
/* One uniform content column: text, cards, and tables all share this width */
.page { max-width: 820px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }

/* Header block: eyebrow, h1, subtitle, meta */
.md .eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
               color: var(--sds-text-accent); font-weight: 700; margin-bottom: 0.75rem; }
.md h1 { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.15;
         text-wrap: balance; margin-bottom: 1rem; }
.md h1 + p { color: var(--sds-text-secondary); font-size: 1.125rem; }
.md .doc-meta { font-size: 0.875rem; color: var(--sds-text-tertiary);
                border-bottom: 2px solid var(--sds-fill-brand); padding-bottom: 2rem;
                margin-bottom: 2.5rem; }

/* Section headings */
.md h2 { font-size: 1.5rem; font-weight: 700; text-wrap: balance;
         border-top: 1px solid var(--sds-sand-200); padding-top: 2.5rem; margin: 4rem 0 0.5rem; }
.md h2 + p { color: var(--sds-text-secondary); font-size: 0.95rem; margin-bottom: 2rem; }
.md h3 { font-size: 1.25rem; font-weight: 700; text-wrap: balance; margin: 2.75rem 0 0.85rem;
         display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.md h4 { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }

.md p { margin-bottom: 1rem; }
.md ul, .md ol { margin: 0 0 1rem 1.25rem; }
.md li { margin-bottom: 0.45rem; }
.md strong { font-weight: 600; }
.md code { font-family: var(--sds-font-mono); font-size: 0.85em;
           background: var(--sds-sand-100); padding: 0.1em 0.35em;
           border-radius: var(--sds-radii-sm); }

/* Principles grid: the first list of the document */
.md .principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                  gap: 1rem; margin: 1.5rem 0 1rem; max-width: none; list-style: none; }
.md .principles li { background: var(--sds-bg-default); border: 1px solid var(--sds-border-default);
                     border-radius: var(--sds-radii-md); padding: 1.1rem 1.2rem; margin: 0;
                     font-size: 0.875rem; color: var(--sds-text-secondary); }
.md .principles li strong { display: block; color: var(--sds-text-primary); font-size: 0.95rem;
                            margin-bottom: 0.4rem; }

/* Feature cards: h3 sections whose heading carries a status pill */
.md .feature { background: var(--sds-bg-default); border: 1px solid var(--sds-border-default);
               border-radius: var(--sds-radii-md); padding: 1.4rem 1.6rem; margin-bottom: 1.1rem; }
.md .feature h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.6rem; }
.md .feature p { font-size: 0.95rem; color: var(--sds-text-secondary); margin-bottom: 0.6rem; }
.md .feature p:last-child { margin-bottom: 0; }
.md .feature p.facts { font-size: 0.85rem; color: var(--sds-text-tertiary); }
.md .feature p.facts em { font-style: normal; }

/* Status pills: SDS badge (subtle variant) */
.pill { display: inline-block; font-family: var(--sds-font-body); font-size: 0.72rem;
        font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; padding: 0.18em 0.7em;
        border-radius: var(--sds-radii-full); white-space: nowrap; }
.md h3 .pill { margin-left: auto; }
.pill.human { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.pill.hybrid { background: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.pill.auto { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.pill.internal { background: var(--badge-gray-bg); color: var(--badge-gray-fg); }
.md .legend { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center;
              margin: 0.75rem 0 0.5rem; }

/* Tables (markdown-generated) */
.md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse;
            border: 1px solid var(--sds-border-default); border-radius: var(--sds-radii-md);
            background: var(--sds-bg-default); font-size: 0.875rem; margin: 1.25rem 0 1.75rem; }
.md th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
         color: var(--sds-text-tertiary); font-weight: 700; padding: 0.75rem 1rem;
         border-bottom: 1px solid var(--sds-border-default); background: var(--sds-bg-secondary); }
.md td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--sds-border-default);
         vertical-align: top; }
.md tr:last-child td { border-bottom: none; }
.md td:first-child { font-weight: 600; min-width: 9rem; }

/* Callout (blockquote) */
.md blockquote { border-left: 3px solid var(--sds-fill-brand); background: var(--sds-fill-brand-soft);
                 padding: 1rem 1.25rem; border-radius: 0 var(--sds-radii-md) var(--sds-radii-md) 0;
                 margin: 1.5rem 0; font-size: 0.93rem; }
.md blockquote p { margin: 0; }

/* Footer */
.md hr { border: none; border-top: 1px solid var(--sds-sand-200); margin: 4rem 0 1.5rem; }
.md hr ~ p { font-size: 0.82rem; color: var(--sds-text-tertiary); }

@media print {
  body { background: #fff; color: #111; }
  .page { max-width: none; padding: 0; }
  .md h2 { break-before: page; }
  .md h1 + p + .doc-meta + p, .md h3 { break-inside: avoid; }
  .md .feature, .md .principles li { break-inside: avoid; border-color: #ccc; }
  .md h2, .md h3, .md h4 { break-after: avoid; }
  .md table { display: table; width: 100%; overflow-x: visible; border-color: #ccc;
              font-size: 0.75rem; }
  .md th { white-space: normal; }
  .md th, .md td { padding: 0.5rem 0.55rem; }
  .md tr { break-inside: avoid; }
  .md td:first-child { min-width: 0; }
}