/* Cleared to Paid articles: reading column, charts from the report (report.css), the devices-per-year columns. Colors come only from site.css tokens. */
.a-article .head .a-question { margin: 0.6rem 0 0; font-style: italic; color: var(--ink-2); }
.a-body { max-width: var(--col); }
.a-body > p { margin: 0 0 1.1rem; }
.a-body > h2.a-h { font-size: 1.2rem; line-height: 1.3; margin: 2rem 0 0.6rem; }
.a-body > ol, .a-body > ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.a-body > ol li, .a-body > ul li { margin: 0 0 0.45rem; }
.a-fig { margin: 1.4rem 0 1.8rem; }
.a-view { border-left: 3px solid var(--accent-mark); padding: 0.2rem 0 0.2rem 1rem; margin: 1.4rem 0; }
.a-close { font-style: italic; }
.a-discuss { color: var(--ink-2); }
.a-explore, .a-sources { max-width: var(--col); margin-top: 2rem; }
.a-explore h2, .a-sources h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.a-explore ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.a-explore a { display: grid; gap: 0.15rem; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; }
.a-explore a span { color: var(--ink-2); font-size: 0.9rem; }
.a-sources p { font-size: 0.85rem; color: var(--ink-3); }
.ph { background: var(--panel); border: 1px dashed var(--rule); padding: 0 0.3rem; }
.a-cols { display: block; width: 100%; height: auto; font-family: var(--sans); }
.a-cols text { fill: var(--ink-3); font-size: 10px; }   /* SVG units: the chart is 640 wide and scales */
@media (max-width: 600px) { .a-cols text { font-size: 15px; } }
@media (max-width: 480px) { .a-cols text { font-size: 19px; } }
@media (max-width: 400px) { .a-cols text { font-size: 22px; } }
.a-cols .grid { stroke: var(--rule); stroke-width: 1; }
.a-cols .yes { fill: var(--accent-mark); }
.a-cols .no { fill: var(--bar-3); }
.a-cols .part .no { fill: none; stroke: var(--bar); stroke-width: 1.5px; stroke-dasharray: 3 2; }
.a-cols .part-lab { fill: var(--ink-2); font-weight: 600; }
.a-cols [data-tip] { cursor: pointer; }
.a-cols [data-tip]:focus { outline: none; }
.a-cols [data-tip]:focus-visible rect { stroke: var(--focus); stroke-width: 2px; }