/* Texas Commercial Plans, editorial family: articles and the three section indexes.
   Loaded after /assets/txcp.css (tokens, type, header, footer). DESIGN.md sections 3, 4 and 6.
   Article bodies are kept byte-for-byte as published (the <div class="prose text-gray-300">
   container and everything in it), and no Tailwind is loaded, so the body markup's utility
   classes are inert. The compat layer below maps the ones that carry meaning (dark-theme
   colors, panels, borders, spacing, flex rows, `hidden`) onto the tokens, scoped to the article
   page so nothing leaks into the rest of the site. Color never grades a rate. */

/* ── Article column ────────────────────────────────────────────────────────── */

.article-page { padding: var(--s6) var(--gutter) 0; }
.article, .article-page > section { max-width: var(--measure); margin: 0 auto; font-size: 1.125rem; line-height: 1.65; }
.article-page > section { margin-top: var(--s7); }
@media (min-width: 1000px) { .article, .article-page > section { margin-left: max(0px, calc((100% - var(--page-max)) / 2)); } }

.breadcrumb { font-size: var(--text-small); color: var(--steel); margin: 0 0 var(--s4); line-height: 1.4; }
.breadcrumb a { color: var(--steel); display: inline-block; padding: 12px 0; margin: -12px 0; }
.breadcrumb__sep { margin: 0 var(--s1); }

.article__header { margin: 0 0 var(--s6); }
/* Article titles run long (often 15 to 25 words), so they sit one step below the page h1 size. */
.article__header h1 { font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem); margin: 0 0 var(--s4); }
.article__meta { font-size: var(--text-small); color: var(--steel); margin: 0 0 var(--s4); }
.article__lead { font-size: 1.25rem; line-height: 1.55; margin: 0 0 var(--s4); }

.article__closing {
  margin: var(--s7) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.article figure { margin: 0 0 var(--s6); }
.article img, .article svg, .article video { max-width: 100%; height: auto; }
.article figcaption { font-size: var(--text-small); color: var(--steel); margin-top: var(--s2); }

/* ── Body typography (.prose is the published container; the bare page uses its own) ── */

:is(.prose, .article__bare-body) { color: var(--ink); }
:is(.prose, .article__bare-body) > :first-child { margin-top: 0; }
:is(.prose, .article__bare-body) h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 800;
  margin: var(--s7) 0 var(--s3);
}
:is(.prose, .article__bare-body) h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  margin: var(--s6) 0 var(--s2);
}
:is(.prose, .article__bare-body) h4 { font-size: 1.125rem; font-weight: 700; margin: var(--s5) 0 var(--s2); }
:is(.prose, .article__bare-body) p { margin: 0 0 var(--s4); }
:is(.prose, .article__bare-body) :is(ul, ol) { margin: 0 0 var(--s5); padding-left: 1.4em; }
:is(.prose, .article__bare-body) li { margin: 0 0 var(--s2); }
:is(.prose, .article__bare-body) li::marker { color: var(--steel); }
:is(.prose, .article__bare-body) strong { font-weight: 650; color: var(--ink); }
:is(.prose, .article__bare-body) a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
:is(.prose, .article__bare-body) a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:is(.prose, .article__bare-body) code { font-family: var(--font-text); font-size: 0.95em; background: var(--survey); border-radius: 3px; padding: 0 4px; }
:is(.prose, .article__bare-body) blockquote { margin: var(--s5) 0; padding: 0 0 0 var(--s4); border-left: 3px solid var(--ink); }
:is(.prose, .article__bare-body) blockquote p:last-child { margin-bottom: 0; }
:is(.prose, .article__bare-body) blockquote :is(footer, cite) { display: block; font-size: var(--text-small); color: var(--steel); font-style: normal; margin-top: var(--s2); }
:is(.prose, .article__bare-body) figure { margin: var(--s6) 0; }
:is(.prose, .article__bare-body) figure img { display: block; border-radius: var(--radius-panel); }
:is(.prose, .article__bare-body) hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }

/* Tables (DESIGN section 4): Survey header row, Rule lines between rows, sentence-case heads,
   tabular figures. A wide table scrolls inside its own container: the article script wraps each
   one in a focusable region with a visible note; without script the table itself scrolls. */
:is(.prose, .article__bare-body) table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s5) 0 var(--s6);
  font-size: var(--text-small);
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
:is(.prose, .article__bare-body) :is(th, td) {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  background: none;
}
:is(.prose, .article__bare-body) :is(th, td).num { text-align: right; }
:is(.prose, .article__bare-body) th { background: var(--survey); font-weight: 600; text-transform: none; letter-spacing: 0; }
:is(.prose, .article__bare-body) thead th { border-bottom: 1px solid var(--steel); }
:is(.prose, .article__bare-body) tr:nth-child(even) td { background: none; }
@media (max-width: 759.98px) {
  html:not(.js) :is(.prose, .article__bare-body) table { display: block; overflow-x: auto; }
}
.table-scroll { overflow-x: auto; margin: var(--s5) 0 var(--s6); }
.table-scroll > table { margin: 0; min-width: 32rem; }
.table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.table-scroll__note { display: none; font-size: var(--text-small); color: var(--steel); margin: 0 0 var(--s2); }
@media (max-width: 759.98px) { .table-scroll__note { display: block; } }

/* ── Legacy body compatibility (DESIGN section 6) ──────────────────────────── */
/* Dark-theme text colors: white and light grays were the body voice, so they become Ink;
   the dimmer grays were secondary text, so they become Steel. Accent blues and ambers were
   links and labels: Ink. */
.article-page :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300,
  .text-electric-400, .text-electric-500, .text-amber-300, .text-amber-400) { color: var(--ink); }
.article-page :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) { color: var(--steel); }
.article-page .text-navy-950 { color: var(--label); }

/* Panels, notes and callouts: one tint or one border, never both glowing. */
.article-page :is(.bg-electric-500\/5, .bg-amber-500\/\[0\.06\], .bg-gradient-to-br, .bg-white\/5, .bg-white\/\[0\.03\]) { background: var(--survey); }
.article-page .bg-navy-900 { background: var(--label); }
.article-page .border { border: 1px solid var(--rule); }
.article-page .border-t { border-top: 1px solid var(--rule); }
.article-page :is(.border-white\/10, .border-white\/5, .border-electric-500\/30, .border-amber-500\/20, .border-amber-500\/30) { border-color: var(--rule); }
.article-page :is(.rounded-lg, .rounded-xl, .rounded-2xl) { border-radius: var(--radius-panel); }
.article-page :is(.shadow-lg, .shadow-amber-500\/20) { box-shadow: none; }
.article-page aside.border, .article-page .tx-capture { color: var(--ink); }

/* Spacing and type size utilities the bodies lean on. */
.article-page .p-4 { padding: var(--s4); }
.article-page .p-6 { padding: var(--s5); }
.article-page .px-4 { padding-left: var(--s4); padding-right: var(--s4); }
.article-page .px-5 { padding-left: var(--s5); padding-right: var(--s5); }
.article-page .pt-6 { padding-top: var(--s5); }
.article-page .my-8 { margin-top: var(--s6); margin-bottom: var(--s6); }
.article-page .my-10 { margin-top: var(--s7); margin-bottom: var(--s7); }
.article-page .mt-2 { margin-top: var(--s2); }
.article-page .mt-3 { margin-top: var(--s3); }
.article-page :is(.mt-10, .mt-12) { margin-top: var(--s7); }
.article-page :is(.mb-1, .mb-1\.5) { margin-bottom: var(--s1); }
.article-page .mb-3 { margin-bottom: var(--s3); }
.article-page .mb-4 { margin-bottom: var(--s4); }
@media (min-width: 768px) { .article-page .md\:p-5 { padding: var(--s5); } .article-page .md\:p-8 { padding: var(--s6); } }
.article-page .text-xs { font-size: 0.875rem; }
.article-page .text-sm { font-size: var(--text-small); }
.article-page .text-base { font-size: 1rem; }
.article-page .text-lg { font-size: 1.125rem; }
.article-page .text-xl { font-size: 1.25rem; }
.article-page .leading-none { line-height: 1.2; }
.article-page .font-semibold { font-weight: 600; }
.article-page .font-bold { font-weight: 700; }
.article-page .underline { text-decoration: underline; text-underline-offset: 3px; }
.article-page .whitespace-nowrap { white-space: nowrap; }
.article-page .flex { display: flex; }
.article-page .flex-col { flex-direction: column; }
.article-page .flex-1 { flex: 1 1 0%; }
.article-page .items-center { align-items: center; }
.article-page .gap-2 { gap: var(--s2); }
.article-page .gap-3 { gap: var(--s3); }
@media (min-width: 640px) { .article-page .sm\:flex-row { flex-direction: row; } }
.article-page .hidden { display: none; }
.article-page .not-prose { margin-top: var(--s7); }
.article-page .max-w-xl { max-width: 36rem; }

/* Subscribe forms kept as published (top aside, in-body aside, the weekly end section):
   44px field and button, Steel field border, Ink primary button, visible focus. */
.article-page :is(.tx-capture, section .bg-gradient-to-br) h3,
.article-page section .bg-gradient-to-br .text-lg { font-family: var(--font-display); font-weight: 700; }
.article-page form input[type="email"] {
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--steel);
  border-radius: var(--radius-control);
  background: var(--label);
  color: var(--ink);
  font: 400 1rem/1.3 var(--font-text);
  width: 100%;
}
.article-page form.flex input[type="email"] { width: auto; min-width: 0; }
.article-page form button[type="submit"] {
  min-height: 44px;
  padding: 0 var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--label);
  font: 600 1rem/1.2 var(--font-text);
  cursor: pointer;
}
.article-page form button[type="submit"]:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-page form :is(input, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.article-page .tx-capture-msg:empty { display: none; }

/* Named body components from older generators. */
.article-page .checklist { background: var(--survey); border-radius: var(--radius-panel); padding: var(--s5); margin: var(--s6) 0; }
.article-page .checklist h3 { margin-top: 0; }
.article-page .quick-read { background: var(--survey); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); margin: 0 0 var(--s6); }
.article-page :is(.rate-table, .matrix-table) td { font-variant-numeric: tabular-nums lining-nums; }
.article-page .back-link-inline { color: var(--ink); }

/* ── Section indexes (/daily-market-news/, /weekly-market-insights/, /blog/) ── */

.section-page { padding-top: var(--s6); }
.section-intro { max-width: var(--measure); margin-bottom: var(--s6); }
.section-intro h1 { margin-bottom: var(--s3); }
.section-intro .fine a { color: var(--steel); }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 52rem; }
.post-list__item { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.post-list__title { font-size: var(--text-h3); font-weight: 700; margin: 0 0 var(--s1); line-height: 1.25; }
.post-list__title a { text-decoration-thickness: 1px; display: inline-block; padding: 9px 0; margin: -9px 0; }
/* The 9px padding makes a one-line title a 44px target; the negative margin keeps the list's rhythm. */
.post-list__meta { font-size: var(--text-small); color: var(--steel); margin: 0 0 var(--s2); }
.post-list__desc { margin: 0; max-width: var(--measure); }
.section-subscribe { margin: 0 0 var(--s7); max-width: 40rem; }
.section-subscribe h2 { margin-bottom: var(--s2); }
.section-page .hidden { display: none; }
/* The subscribe script swaps the message's classes for dark-theme color names: Ink, not color. */
.section-page :is(.text-green-400, .text-red-400, .text-amber-300) { color: var(--ink); font-size: var(--text-small); margin: var(--s3) 0 0; padding-left: var(--s3); border-left: 3px solid var(--ink); }