/* Shared by the four information pages: methodology, trust & safety, report content and
   the 2257 statement. Linked from each of them rather than from style.css, so the other
   ~600 pages never download it. (Named methodology.css until 2026-08-23, when the three
   new pages used its classes without linking it and rendered unstyled.) Palette validated for colour-vision deficiency: the
   blue/amber/teal set clears adjacent-pair separation, the brand red+green pair does not. */

.mg-lede{font-size:17px;line-height:1.65;color:#183b56}

/* Scale at a glance */
.mg-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:26px 0 6px}
@media(min-width:700px){.mg-tiles{grid-template-columns:repeat(4,1fr)}}
.mg-tile{background:#f7f9fc;border:1px solid #e2eef1;border-radius:14px;padding:18px 14px;text-align:center}
.mg-tile-n{display:block;font-size:26px;font-weight:700;color:#183b56;line-height:1.1;letter-spacing:-.02em}
.mg-tile-l{display:block;margin-top:6px;font-size:12.5px;color:#6f7d95;line-height:1.35}

/* The four signal families */
.mg-signals{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 8px}
@media(min-width:760px){.mg-signals{grid-template-columns:1fr 1fr}}
.mg-signal{display:flex;gap:12px;background:#fff;border:1px solid #e2eef1;border-radius:14px;padding:16px}
.mg-signal i{font-size:20px;color:#566ffe;flex-shrink:0;line-height:1.4}
.mg-signal div{font-size:14px;line-height:1.55;color:#5b6a80}
.mg-signal strong{color:#183b56}

/* Figures */
.mg-fig{margin:26px 0;padding:20px;border:1px solid #e2eef1;border-radius:16px;background:#fff}
.mg-fig-t{font-size:15px;font-weight:700;color:#183b56;margin:0 0 4px}
.mg-fig-s{font-size:13.5px;color:#6f7d95;margin:0 0 16px;line-height:1.5}

/* Stacked proportion bar. The 2px surface gap between segments is what keeps the
   boundary readable without a border darkening the fill. */
.mg-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;background:#eef2f7;gap:2px}
.mg-bar-seg{height:100%}
.mg-key{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.mg-key li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#6f7d95}
.mg-key b{color:#183b56;font-weight:700}
.mg-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}

/* Line chart */
.mg-chart{overflow-x:auto}
.mg-svg{width:100%;min-width:420px;height:auto;display:block}
.mg-ax{font-size:11px;fill:#9aa8bd;font-family:inherit}
.mg-val{font-size:12px;font-weight:700;fill:#183b56;font-family:inherit}

/* Data table behind a disclosure: identity is never colour-alone, and the raw numbers
   stay machine-readable for crawlers. */
.mg-data{margin-top:14px}
.mg-data summary{cursor:pointer;font-size:13px;color:#566ffe;font-weight:600}
.mg-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.mg-table th,.mg-table td{text-align:left;padding:7px 10px;border-bottom:1px solid #e2eef1;color:#5b6a80}
.mg-table th{color:#183b56;font-weight:700}

.mg-updated{margin-top:26px;font-size:12.5px;color:#9aa8bd}
.mg h2{margin-top:26px}
.mg h3{margin-top:24px}

/* FAQ disclosure list. Same visual language as the figures so the page reads as one thing. */
.mg-faq{margin:14px 0 6px}
.mg-faq-item{border:1px solid #e2eef1;border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff}
.mg-faq-item summary{cursor:pointer;font-weight:600;color:#183b56;font-size:14.5px;line-height:1.45;list-style:none}
.mg-faq-item summary::-webkit-details-marker{display:none}
.mg-faq-item summary::after{content:"+";float:right;color:#566ffe;font-weight:700;margin-left:12px}
.mg-faq-item[open] summary::after{content:"\2212"}
.mg-faq-item p{margin:10px 0 0;font-size:14px;line-height:1.6;color:#5b6a80}

/* Removal triggers reuse .mg-signal, but the icon is a negation rather than a feature,
   so it takes the muted-warning colour instead of brand blue. */
.mg-signals-rm .mg-signal i{color:#d97706}
.mg-signals-rm .mg-signal strong{color:#183b56}

/* ── Shared typography for every footer-linked information page ──────────────
   Applied via .info-page from info_page_open.php. Before this each page styled
   itself by accident: the same <h2> rendered at three different sizes across
   about / privacy / dmca because only some pages loaded this file at all. */
.info-page{color:#5b6a80;font-size:15px;line-height:1.7}
.info-page h2{font-size:20px;font-weight:700;color:#183b56;margin:30px 0 12px;line-height:1.35}
.info-page h2:first-child{margin-top:0}
.info-page h3{font-size:16.5px;font-weight:700;color:#183b56;margin:24px 0 10px;line-height:1.4}
.info-page h4{font-size:15px;font-weight:700;color:#183b56;margin:20px 0 8px}
.info-page p{margin:0 0 14px}
.info-page p:last-child{margin-bottom:0}
.info-page a{color:#566ffe;text-decoration:none;border-bottom:1px solid rgba(86,111,254,.28);transition:border-color .15s ease}
.info-page a:hover{border-bottom-color:#566ffe;text-decoration:none}
.info-page ul,.info-page ol{margin:0 0 16px;padding-left:22px}
.info-page li{margin:0 0 8px}
.info-page li::marker{color:#9aa8bd}
.info-page strong{color:#183b56;font-weight:600}
.info-page hr{border:0;border-top:1px solid #e2eef1;margin:28px 0}
.info-page table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
.info-page th,.info-page td{text-align:left;padding:9px 12px;border-bottom:1px solid #e2eef1}
.info-page th{color:#183b56;font-weight:700}
/* Links inside the coloured signal/figure cards keep their own treatment. */
.info-page .mg-signal a,.info-page .mg-key a{border-bottom:0}
@media(max-width:600px){
  .info-page{font-size:14.5px}
  .info-page h2{font-size:18px;margin-top:26px}
  .info-page h3{font-size:15.5px}
}

/* Callout card. Deliberately NOT the coloured-left-bar pattern: that is the default
   every framework ships, it reads as a generic notice rather than as part of this site,
   and it fights the rounded bordered cards used everywhere else here. Instead it follows
   the same language as .mg-signal and .box — hairline border, generous radius, and the
   icon carried in a tinted square badge that does the job the bar was doing. */
.info-callout{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #e2eef1;border-radius:14px;padding:20px 22px;margin:22px 0;box-shadow:0 1px 2px rgba(24,59,86,.04)}
.info-callout-ico{flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:#eef2ff;color:#566ffe;display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
.info-callout-body{flex:1 1 auto;min-width:0}
.info-callout-body > :first-child{margin-top:0}
.info-callout-body > :last-child{margin-bottom:0}
.info-callout h3{margin:0 0 6px;font-size:15px;letter-spacing:.01em}
.info-callout .info-callout-lead{font-size:17px;font-weight:700;margin:0 0 8px;line-height:1.3}
.info-callout .info-callout-lead a{border-bottom:0}
/* Warning variant: the tint moves to the badge and a faint page-tint, never a bar. */
.info-callout-warn{background:#fffdf8;border-color:#f6e5c8}
.info-callout-warn .info-callout-ico{background:#fdf0dc;color:#c2740a}
@media(max-width:560px){
  .info-callout{padding:16px;gap:13px}
  .info-callout-ico{flex-basis:34px;width:34px;height:34px;font-size:17px;border-radius:10px}
}

/* style.css sets `list-style:none` on lists globally (line ~10752) for the site's nav
   and card components. Inside prose that silently removes every bullet and number, which
   is why the DMCA notice requirements read as an unnumbered wall. Restore them here only
   for content lists, with the specificity needed to win. */
.info-page ul{list-style:disc outside}
.info-page ol{list-style:decimal outside}
.info-page ul li,.info-page ol li{list-style:inherit}
.info-page ul,.info-page ol{padding-left:26px}