/* ─────────────────────────────────────────────────────────────────── PACING TABLE · styling for the structural-HTML anchors added to essays 01 through 05. WikiDesignCo Library. WHAT THIS FILE DOES Part of the pacing work is tabular rather than animated: score scales, trade ledgers, detection layers, source types. Those become real HTML tables so they stay selectable, searchable and readable by a screen reader. The library had markup for `.article__table` and no styling for it, so a table rendered as bare browser default on a dark page. This supplies the WDC skin. WHO CONSUMES IT Essays 01 through 05 link it from . One file, five surfaces, so a refinement here upgrades every table at once. CONSTRAINTS WDC palette, zero green. Horizontal scroll below 900px so a wide table never forces the page body to scroll sideways. ─────────────────────────────────────────────────────────────────── */ .article__table { width: 100%; border-collapse: collapse; margin: 2.6em 0; font-family: var(--font-sans, 'Inter Tight', system-ui, sans-serif); font-size: 15px; line-height: 1.55; color: var(--silver, #a4adda); background: linear-gradient(160deg, rgba(20, 22, 60, 0.55) 0%, rgba(2, 3, 13, 0.75) 100%); border: 1px solid var(--line-strong, rgba(176, 184, 240, 0.22)); border-radius: 14px; overflow: hidden; } .article__table caption { caption-side: top; text-align: left; padding: 16px 22px 10px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan, #14e0ff); } .article__table th { text-align: left; padding: 14px 22px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; background: rgba(91, 61, 245, 0.16); border-bottom: 1px solid var(--line-strong, rgba(176, 184, 240, 0.22)); vertical-align: bottom; } .article__table td { padding: 14px 22px; border-bottom: 1px solid rgba(176, 184, 240, 0.10); vertical-align: top; } .article__table tbody tr:last-child td { border-bottom: 0; } .article__table tbody tr:nth-child(even) { background: rgba(176, 184, 240, 0.035); } .article__table td strong, .article__table th:first-child { color: #ffffff; } .article__table td code { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; color: var(--amber, #ffb547); } /* a wide table scrolls inside its own box, so the page body never does */ .article__table-scroll { margin: 2.6em -120px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .article__table-scroll .article__table { margin: 0; min-width: 640px; } @media (max-width: 900px) { .article__table-scroll { margin: 2em -16px; } .article__table { font-size: 14px; } .article__table th, .article__table td { padding: 12px 16px; } }