/* Livecounts.nl blog, second batch of posts: platform accents and two small components.
   Loaded after blog.css, which has everything else. */

.acc-facebook { --acc: #1864D6; }
.acc-youtube { --acc: #D4201A; }
.acc-instagram { --acc: #C13584; }
.acc-kick { --acc: #1E8B0E; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .acc-facebook { --acc: #4A90F0; }
    :root:not([data-theme="light"]) .acc-youtube { --acc: #F0463C; }
    :root:not([data-theme="light"]) .acc-instagram { --acc: #E0569F; }
    :root:not([data-theme="light"]) .acc-kick { --acc: #53C22B; }
}
:root[data-theme="dark"] .acc-facebook { --acc: #4A90F0; }
:root[data-theme="dark"] .acc-youtube { --acc: #F0463C; }
:root[data-theme="dark"] .acc-instagram { --acc: #E0569F; }
:root[data-theme="dark"] .acc-kick { --acc: #53C22B; }

/* What the platform shows next to the full number */
.shows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0 8px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.shows > div { padding: 14px 18px 16px; }
.shows > div + div { border-left: 1px solid var(--line); }
.post-body .shows p { margin: 0; }
.post-body .shows .shows-k { color: var(--muted); font-size: 13px; }
.post-body .shows .shows-v { margin: 2px 0 4px; color: var(--ink); font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.post-body .shows .shows-s { color: var(--muted); font-size: 13px; line-height: 1.45; }
.shows > div:first-child .shows-v { color: var(--ink-2); }
.post-body .shows-foot { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
@media (max-width: 480px) {
    .shows { grid-template-columns: minmax(0, 1fr); }
    .shows > div + div { border-left: 0; border-top: 1px solid var(--line); }
    .post-body .shows .shows-v { font-size: 26px; }
}

/* The date a rule was checked, next to the rule */
.post-body .checked { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.rules td.t, .rules th { vertical-align: top; }

/* Short inline tokens like ?u= must not break in the middle on phones */
.post-body :not(pre) > code { white-space: nowrap; }

/* On a phone a two-series read-out can be wider than the chart: let it wrap inside it */
.chart[data-kind="lineb"] .tip { max-width: 100%; white-space: normal; }