/* Phone-width fixes, and the chart buttons' look, for the mirrored AI posts (/briefings/ai-blogs/posts/*,
   /briefings/ai-briefings/posts/*).

   Those pages are copies of Blogwright and Briefwright posts on jasonfurman.org, each carrying its
   own inline styles. They are never edited by hand — the next mirror pass would overwrite them —
   so a display fix lives HERE: scripts/mirror_ai_posts.py links this file into every copied page,
   after the post's own <style> blocks, so these rules win at equal specificity and survive every
   mirror pass. Each phone rule names the symptom from the 2026-10-21 launch sweep; the overflow
   rule only acts on a string that cannot otherwise fit a line, and the rest sit behind the phone
   media query. The one thing a desktop reader sees from here is the button row under each chart. */

/* Long URLs and raw text (a 120-character link in a pre-wrap block, the source list's links)
   cannot wrap, so the whole page widened to 700–1,500px and a phone shrank the text to fit.
   overflow-wrap: anywhere breaks only a word that cannot fit its line; ordinary prose is untouched.
   Not applied to table cells, whose tables scroll instead (below). */
main p, main li, main dd, main figcaption, main blockquote, main .verbatim, main pre, main code, main a { overflow-wrap: anywhere; }

/* The "Download PNG / Copy chart / Copy link" row under every chart (shared.js hydrateArticleFigs,
   which the mirror runs on every copied page; Jason, 2026-10-29). The same fixed-size buttons as
   site.css gives the rest of the site — these pages do not load site.css or the theme, so the
   colors are written out. */
.mf-figtools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.mf-figtool { background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 5px; width: 108px; height: 26px;
  padding: 0; font: 12px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: center;
  color: #808080; cursor: pointer; white-space: nowrap; }
.mf-figtool:hover { color: #4472C4; border-color: #4472C4; }
.mf-figtool.copied { color: #70AD47; border-color: #70AD47; }
@media (pointer: coarse) { .mf-figtool { height: 32px; line-height: 30px; } }

@media (max-width: 760px) {
  /* A table wider than the phone scrolls inside its own box instead of widening the page. The
     briefings already wrap each table in .bw-tablewrap; a blog post's bare table gets the same. */
  .bw-tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  main table:not(.bw-table) { display: block; overflow-x: auto; max-width: 100%; }
  /* A row of fixed-width chart buttons (three of them) was 11px wider than the phone; let it wrap. */
  .ic-controls, .bw-controls { flex-wrap: wrap; }
  /* An image or chart never wider than the column. */
  main img, main svg { max-width: 100%; height: auto; }
}
/* A phone: the three buttons on one line, as on the rest of the site. */
@media (max-width: 560px) {
  .mf-figtools { gap: 4px; }
  .mf-figtool { width: 96px; font-size: 11px; }
}