/* Flagship TOC, field-card print, and family strip.
   Scoped to .acg-flagship so site chrome is untouched.
   Chip/TOC/sticky polish after PR 96. */

.acg-flagship .acg-print-mast,
.acg-flagship .acg-print-kicker { display: none; }

.acg-flagship-article h2,
.acg-flagship-article h3 { scroll-margin-top: 96px; }

.acg-byline {
  margin-top: 24px;
  display: flex;
  gap: 8px 14px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.8rem;
  color: var(--text-muted, rgba(255,255,255,0.55));
}
.acg-byline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.acg-byline a:hover { color: #fff; }
.acg-byline .acg-byline-read { color: var(--accent, #e11320); }

/* Article body must paint without waiting for reveal JS. Otherwise the TOC
   and Quick Answer stay at opacity 0 and the mobile details never looks open. */
.acg-flagship-article[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Stay in flow so the TOC never covers Quick Answer. Always-visible
   vertical list on every breakpoint so H2s are readable without JS. */
.acg-flagship .acg-toc-host,
.acg-flagship .acg-toc {
  display: block;
  margin: 0 0 22px;
  scroll-margin-top: 88px;
  background: #0e284f;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 10px 14px 12px;
}

.acg-flagship .acg-toc-kicker,
.acg-flagship .acg-toc-label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e11320;
  margin: 0 0 8px;
}

.acg-flagship .acg-toc-host ol,
.acg-flagship .acg-toc ol,
.acg-flagship .acg-toc-desktop ol,
.acg-flagship .acg-toc-mobile ol {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.acg-flagship .acg-toc-host li,
.acg-flagship .acg-toc li,
.acg-flagship .acg-toc-desktop li,
.acg-flagship .acg-toc-mobile li {
  display: block;
  margin: 0;
}

.acg-flagship .acg-toc-host a,
.acg-flagship .acg-toc a,
.acg-flagship .acg-toc-desktop a,
.acg-flagship .acg-toc-mobile a {
  display: block;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.28rem 0;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.acg-flagship .acg-toc-host a:hover,
.acg-flagship .acg-toc a:hover,
.acg-flagship .acg-toc-desktop a:hover,
.acg-flagship .acg-toc-mobile a:hover { color: #fff; }

.acg-flagship .acg-toc-desktop {
  background: #0e284f;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 10px 14px 12px;
}

.acg-flagship .acg-toc-mobile {
  background: #0e284f;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 4px 14px 10px;
}

.acg-flagship .acg-toc-mobile summary {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.acg-flagship .acg-toc-mobile summary::-webkit-details-marker { display: none; }
.acg-flagship .acg-toc-mobile summary::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
  color: #e11320;
  flex: 0 0 auto;
}
.acg-flagship .acg-toc-mobile[open] summary {
  margin-bottom: 10px;
  color: #e11320;
}
.acg-flagship .acg-toc-mobile[open] summary::after { content: "\2212"; }

.acg-family {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 10px 14px 12px;
  margin: 0 0 22px;
  background: rgba(14,40,79,0.55);
}

.acg-family-kicker {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e11320;
  margin: 0 0 8px;
}

.acg-family-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}

.acg-family-step,
.acg-family-prev[aria-disabled="true"] {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
}

.acg-family a {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(225,19,32,0.35);
}

.acg-family a:hover { color: #fff; }
.acg-family [aria-current="page"] {
  color: #fff;
  border-bottom-color: #e11320;
}

.acg-family-back {
  margin-left: auto;
}

.acg-flagship .acg-field-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.acg-flagship .acg-field-table table {
  width: 100%;
}

@media (max-width: 420px) {
  .acg-flagship .acg-field-table table {
    min-width: 0 !important;
    font-size: 0.78rem;
  }
  .acg-flagship .acg-field-table th,
  .acg-flagship .acg-field-table td {
    padding: 8px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Duplicate mill next-link row. Family strip already covers next pages. */
.acg-flagship [aria-labelledby="acg-next-h"] { display: none; }

.acg-flagship .blog-content,
.acg-flagship-article {
  max-width: 100%;
}

@media (min-width: 861px) {
  /* Hide leftover mobile details if JS ever builds one. Never set
     display:block on <details> at the mobile breakpoint. */
  .acg-flagship .acg-toc-mobile { display: none; }
}

@media (max-width: 860px) {
  .acg-flagship .acg-toc-desktop { display: none; }
  .acg-family-back { margin-left: 0; }
}

@media (max-width: 768px) {
  /* Live 390x844: 50vh hero plus 140px pad pushed QA under the sticky bar. */
  .acg-flagship .page-hero {
    min-height: 0;
    padding: 88px 0 18px;
  }
  .acg-flagship .page-hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.15rem);
    margin-bottom: 10px;
  }
  .acg-flagship .page-hero p {
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .acg-flagship .acg-byline { margin-top: 12px; }
  .acg-flagship .section {
    padding-top: 18px;
    padding-bottom: 28px;
  }
  .acg-flagship .acg-family {
    padding: 8px 10px;
    margin: 0 0 14px;
  }
  .acg-flagship .acg-quick-answer {
    margin: 0 0 16px;
    padding: 12px 14px 12px 16px;
  }
  .acg-flagship .acg-quick-answer .acg-qa-label { margin-bottom: 6px; }
  .acg-flagship .acg-quick-answer p {
    font-size: 0.86rem;
    line-height: 1.4;
  }
  .acg-flagship-article,
  .acg-flagship .blog-content {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
}

@media print {
  @page { size: letter; margin: 0.45in; }
  html, body.acg-flagship {
    background: #fff !important;
    color: #111 !important;
    overflow: visible !important;
  }
  .acg-flagship .grain,
  .acg-flagship .cursor-dot,
  .acg-flagship .cursor-ring,
  .acg-flagship .hd,
  .acg-flagship .page-hero,
  .acg-flagship .acg-toc-host,
  .acg-flagship .acg-family,
  .acg-flagship .acg-print-hide,
  .acg-flagship .cta-section,
  .acg-flagship .ft,
  .acg-flagship .acg-rfq,
  .acg-flagship [aria-label="Related resources"],
  .acg-flagship [aria-labelledby="acg-rfq-h"],
  .acg-flagship [aria-labelledby="acg-next-h"],
  .acg-flagship [aria-label="About the author"] {
    display: none !important;
  }
  .acg-flagship .section { padding: 0 !important; margin: 0 !important; }
  .acg-flagship .container { max-width: none !important; padding: 0 !important; }
  .acg-flagship .acg-print-mast {
    display: block !important;
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-size: 8.5pt;
    line-height: 1.35;
    color: #111;
    border-bottom: 2pt solid #e11320;
    padding: 0 0 7pt;
    margin: 0 0 10pt;
  }
  .acg-flagship .acg-print-mast strong {
    display: block;
    font-size: 13pt;
    line-height: 1.2;
    margin: 0 0 3pt;
    color: #0e284f;
  }
  .acg-flagship .acg-print-kicker {
    display: block !important;
    font-size: 10pt;
    font-weight: 700;
    color: #0e284f !important;
    margin: 0 0 6pt;
  }
  .acg-flagship-article > *:not(.acg-print-keep) { display: none !important; }
  .acg-flagship .acg-quick-answer {
    background: #fff !important;
    border: 1pt solid #111 !important;
    border-left: 3pt solid #e11320 !important;
    padding: 8pt 10pt !important;
    margin: 0 0 9pt !important;
    break-inside: avoid;
  }
  .acg-flagship .acg-quick-answer .acg-qa-label {
    color: #e11320 !important;
    font-size: 8pt !important;
    margin: 0 0 4pt !important;
  }
  .acg-flagship .acg-quick-answer p {
    color: #111 !important;
    font-size: 9.5pt !important;
    line-height: 1.35 !important;
  }
  .acg-flagship .acg-field-table {
    overflow: visible !important;
    margin: 0 0 9pt !important;
    break-inside: avoid;
  }
  .acg-flagship .acg-field-table table {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 8pt !important;
    color: #111 !important;
  }
  .acg-flagship .acg-field-table th,
  .acg-flagship .acg-field-table td {
    color: #111 !important;
    padding: 4pt 6pt !important;
    border-bottom: 0.5pt solid #999 !important;
  }
  .acg-flagship .acg-field-checklist {
    break-inside: avoid;
  }
  .acg-flagship .acg-field-checklist h2 {
    color: #0e284f !important;
    font-size: 12pt !important;
    margin: 0 0 6pt !important;
  }
  .acg-flagship .acg-field-checklist ul {
    margin: 0;
    padding-left: 16pt;
  }
  .acg-flagship .acg-field-checklist li {
    color: #111 !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
    margin: 0 0 3.5pt;
  }
}