/* AIimpacted - single small stylesheet, no build step.
   [hidden] guard is mandatory: any author display rule beats the UA sheet. */
:root { --ink: #1a1a2e; --muted: #6b7280; --line: #e5e7eb; --accent: #c2410c; --bg: #ffffff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; }
.logout-form, .inline-form { display: inline; }
.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; }
main { max-width: 860px; margin: 0 auto; padding: 0 16px 48px; }
header.top { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  max-width: 860px; margin: 0 auto; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 20px; }
header.top nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header.top nav a { text-decoration: none; color: var(--muted); }
.btn { display: inline-flex; padding: 6px 14px; border-radius: 6px; background: var(--ink);
  color: #fff !important; text-decoration: none; }
h1 { font-size: 26px; margin: 20px 0 8px; }
.intro { color: var(--muted); margin: 0 0 16px; }
.tabs { display: flex; gap: 4px; margin: 12px 0; border-bottom: 1px solid var(--line); }
.tabs a { padding: 6px 12px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.feed { list-style: none; margin: 0; padding: 0; }
.post-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.flag { width: 28px; height: 21px; flex-shrink: 0; margin-top: 2px; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.flag-globe { color: var(--muted); box-shadow: none; }
.votebox { display: flex; flex-direction: column; align-items: center; min-width: 40px; color: var(--muted); }
.vote { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0 6px; color: var(--muted); }
.vote.on { color: var(--accent); }
.score { font-weight: 600; font-size: 14px; }
.post-row h2 { font-size: 17px; margin: 0 0 4px; font-weight: 600; }
.post-row h2 a { text-decoration: none; }
.meta { font-size: 13px; color: var(--muted); }
.meta a { color: var(--muted); }
.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border: 1px solid var(--line);
  border-radius: 99px; text-decoration: none; color: var(--muted); margin-right: 4px; }
.hero { margin: 14px 0; }
.hero img { display: block; width: 100%; max-height: 420px; object-fit: cover;
  border-radius: 10px; background: var(--line); }
.hero figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.post-body { margin: 16px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment { margin: 14px 0 0; }
.comment-row { display: flex; gap: 10px; }
.comment-kids { margin-left: 20px; padding-left: 12px; border-left: 2px solid var(--line); }
.comment .body { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Rendered markup emits real <p> tags, so it must not inherit the pre-wrap
   that plain bodies use to keep their line breaks. The compound selectors
   are needed because `.comment .body` (two classes, specificity 0,2,0)
   otherwise outranks a bare `.md` (0,1,0) and md comments would keep pre-wrap. */
.md, .post-body.md, .comment .body.md { white-space: normal; }
.md p { margin: 0 0 10px; }
.md h3 { font-size: 17px; margin: 14px 0 6px; }
.md h4 { font-size: 15px; margin: 12px 0 6px; }
.md h5 { font-size: 14px; margin: 12px 0 6px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md blockquote { margin: 0 0 10px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line); color: var(--muted); }
.md code { background: #f3f4f6; border-radius: 4px; padding: 1px 4px; font-size: 13px; }
.md pre { background: #f3f4f6; border-radius: 6px; padding: 10px 12px;
  overflow-x: auto; margin: 0 0 10px; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; margin: 0 0 10px; font-size: 14px; display: block;
  overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.md a { overflow-wrap: anywhere; }
/* Spoilers are blacked out until clicked. Selecting the text does not reveal
   it, so a spoiler stays a spoiler for anyone dragging across the comment. */
.spoiler { background: var(--ink, #111); color: transparent; border-radius: 3px;
  cursor: pointer; }
.spoiler.on { background: none; color: inherit; cursor: auto; }
/* color: transparent is not inherited by links (the site's `a` rule sets its
   own colour), so every descendant of a hidden spoiler is hidden too. */
.spoiler:not(.on) * { color: transparent; }
.form { max-width: 460px; display: grid; gap: 12px; margin: 20px 0; }
.form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.form input, .form select, .form textarea { font: inherit; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; width: 100%; }
.form textarea { min-height: 120px; }
.flash { background: #ecfdf5; border: 1px solid #6ee7b7; padding: 10px 14px; border-radius: 6px; }
.err { background: #fef2f2; border: 1px solid #fca5a5; padding: 10px 14px; border-radius: 6px; }
.pagination { display: flex; gap: 12px; margin: 20px 0; }
.admin-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.admin-table th, .admin-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.barcell { width: 40%; }
.vbar { display: inline-block; height: .6em; min-width: 1px; background: currentColor; opacity: .35; }
footer { max-width: 860px; margin: 0 auto; padding: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px; }
@media (max-width: 600px) { header.top { flex-direction: column; align-items: flex-start; } }
.source { font-size: 14px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; }
.source a { color: var(--muted); }
.facts { border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.facts th, .facts td { text-align: left; padding: 5px 14px 5px 0; border-bottom: 1px solid var(--line); }
.facts th { color: var(--muted); font-weight: 600; padding-right: 24px; white-space: nowrap; }
.excerpt { font-size: 14px; color: #4b5563; margin: 2px 0 4px; overflow-wrap: anywhere; }
.staff { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: #fff; background: var(--accent); border-radius: 4px; padding: 0 5px; vertical-align: 1px; }
/* Impact-event dates are editable in place: the pipeline leaves them blank
   whenever the article never stated one, so this is the only path to filling
   them in. Kept narrow so the date column does not crowd out the rest. */
.date-cell { white-space: nowrap; }
.date-cell input[type="date"] { width: 8.5rem; font: inherit; padding: 2px 4px; }
.date-cell .btn { margin-left: 4px; padding: 2px 6px; }
.date-cell .meta { display: block; font-size: 12px; margin-top: 2px; }
/* A dispatch is held to a different standard than a verified event, so the two
   must never look alike in the queue - approving the wrong one is how an
   unverified story ends up counted as data. */
.queue-dispatch { border-left: 3px solid var(--accent, #6b7280); }
.kind-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px;
  vertical-align: middle; margin-right: 6px; }
.queue-dispatch .kind-badge { background: var(--line); }
.pitch { margin: 2px 0 6px; font-style: italic; }
.queue-item { border: 1px solid var(--line); padding: 10px 12px; margin: 0 0 12px; }
.queue-item h3 { margin: 0 0 4px; font-size: 15px; }
.queue-item blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); }
/* Signed-out comment prompt: looks like the real comment box so the affordance
   reads as "you can post here", then routes to sign-in. */
.signin-cta { display: flex; gap: 8px; align-items: stretch; text-decoration: none; margin: 0 0 6px; }
.signin-cta-box { flex: 1; border: 1px solid var(--line); border-radius: 3px;
                  padding: 9px 10px; color: var(--muted, #777); background: #fff; }
.signin-cta .btn { white-space: nowrap; display: flex; align-items: center; }
.signin-cta:hover .signin-cta-box { border-color: #999; }
.blog-article { max-width: 42em; }
.blog-article h1 { font-size: 30px; line-height: 1.2; }
.blog-article h2 { font-size: 22px; margin-top: 28px; }
.blog-article p { line-height: 1.65; }
.blog-hero { width: 100%; height: auto; border-radius: 6px; margin: 14px 0 6px; }
.figures-note { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 26px; }
.draft-flag { background: #fff7ed; border: 1px solid var(--accent);
  color: var(--accent); padding: 8px 12px; border-radius: 6px; font-weight: 600; }
.blog-table-wrap { overflow-x: auto; margin: 18px 0; }
.blog-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.blog-table th { text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--ink);
  padding: 6px 10px 6px 0; white-space: nowrap; }
.blog-table td { border-bottom: 1px solid var(--line); padding: 9px 10px 9px 0; vertical-align: top; }
.blog-table tr:hover td { background: #fafafa; }
.bar-cell { min-width: 132px; }
.bar-num { font-variant-numeric: tabular-nums; font-weight: 600; display: block; }
.bar { height: 5px; background: var(--accent); border-radius: 3px; margin-top: 3px; }
.share { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.ev { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 3px; margin-bottom: 3px; }
.ev-filing { background: var(--ink); color: #fff; }
.ev-said { background: var(--line); color: #374151; }
.ev-note { display: block; color: #4b5563; }
.blog-article h2 { position: relative; scroll-margin-top: 16px; }
.anchor { position: absolute; left: -0.85em; color: var(--line); text-decoration: none;
  opacity: 0; transition: opacity .12s; font-weight: 400; }
.blog-article h2:hover .anchor, .anchor:focus { opacity: 1; color: var(--accent); }
@media (max-width: 700px) { .anchor { display: none; } }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 30px; margin: 26px 0 8px; }
.blog-card { min-width: 0; }
.blog-card-media { position: relative; display: block; line-height: 0; margin-bottom: 14px; }
/* height:auto is load-bearing: the width/height HTML attributes map to
   presentational CSS dimensions, and with both definite the box ignores
   aspect-ratio entirely - the card rendered 399x675 without this. */
.blog-card-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); background: #fafafa; }
/* Pills sit on the image, bottom-left, the way a category chip does. */
.pill { position: absolute; bottom: 12px; left: 12px; background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 600; line-height: 1.6; padding: 3px 11px; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.pill ~ .pill { left: auto; right: 12px; }
.blog-card h2 { font-size: 19px; line-height: 1.32; margin: 0 0 10px; }
.blog-card h2 a { text-decoration: none; }
.blog-card h2 a:hover { color: var(--accent); }
.card-date { color: var(--muted); font-size: 14px; margin: 0; }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; gap: 32px; } }

.lead-item { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.lead-item h3 { font-size: 16px; margin: 0 0 4px; }
.lead-unreadable { border-left: 3px solid var(--accent); }
.lead-rejected { border-left: 3px solid var(--ink); }
.lead-syndicated { border-left: 3px solid var(--muted); }
.pool-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; background: var(--line); color: #374151; padding: 1px 6px;
  border-radius: 3px; vertical-align: 1px; }

/* The toolbar scrolls sideways on narrow screens rather than wrapping into a
   second row that pushes the textarea off the fold. */
.composer-bar { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 4px;
  border-bottom: 1px solid var(--line); margin-bottom: -4px; }
.composer-btn { flex: 0 0 auto; font: inherit; font-size: 14px; line-height: 1;
  min-width: 30px; padding: 6px 8px; background: none; border: 0; border-radius: 4px;
  color: var(--muted); cursor: pointer; }
.composer-btn:hover { background: var(--line); color: inherit; }
.composer-preview { margin-left: auto; }
/* The emoji picker sits inline under the toolbar rather than floating, so it
   never covers the textarea or runs off the edge of a phone screen. The grid
   scrolls inside a fixed height so the full set does not push the page down. */
.composer-emoji { display: flex; flex-direction: column; gap: 6px; max-width: 380px;
  padding: 6px; margin: 4px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.composer-emoji-search { font: inherit; font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 4px; }
.composer-emoji-tabs { display: flex; gap: 2px; overflow-x: auto; }
.composer-emoji-tab { flex: 0 0 auto; font-size: 18px; line-height: 1; padding: 4px 6px; background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.composer-emoji-tab.on { border-bottom-color: var(--accent); }
.composer-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 2px; max-height: 220px; overflow-y: auto; }
.composer-emoji-btn { font-size: 20px; line-height: 1; padding: 6px 0; background: none;
  border: 0; border-radius: 4px; cursor: pointer; }
.composer-emoji-btn:hover, .composer-emoji-btn:focus-visible { background: var(--line); }
.composer-pane { min-height: 120px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; }

/* Share menu: a <details> popover inside a meta line. It floats so opening it
   never shifts the feed. (.share is taken by the blog table's share column.) */
.sharebox { display: inline-block; position: relative; }
.sharebox { vertical-align: middle; }
.sharebox > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 99px; background: #f3f4f6; color: var(--ink); font-weight: 600;
  font-size: 12px; line-height: 1.6; }
.sharebox > summary:hover, .sharebox[open] > summary { background: var(--line); }
.sharebox > summary::-webkit-details-marker { display: none; }
.share-menu { position: absolute; z-index: 10; left: 0; top: 1.7em; display: grid; gap: 1px;
  min-width: 180px; max-width: calc(100vw - 32px); padding: 6px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.share-menu a, .share-menu button { display: block; text-align: left; padding: 5px 8px; border: 0;
  border-radius: 4px; background: none; font: inherit; font-size: 14px; color: var(--ink);
  text-decoration: none; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: var(--line); }
.share-embed { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.share-embed label { display: block; padding: 0 8px; font-size: 12px; color: var(--muted); }
.share-embed textarea { display: block; width: 300px; max-width: 100%; margin-top: 4px;
  font: 12px/1.4 ui-monospace, Consolas, monospace; }

/* Blog: the short answer, and the visible Q&A that backs the FAQPage markup.
   Both added 2026-09-15 so answer engines have something self-contained to
   quote; see the comments in blog.php. */
.blog-answer { border-left: 3px solid var(--accent); background: #fffaf7;
  padding: 14px 16px; margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
.blog-data { margin-top: 30px; padding: 4px 18px 10px; border: 1px solid var(--line); border-radius: 8px; }
.blog-data ul { padding-left: 18px; line-height: 1.7; }
.blog-faq { margin-top: 34px; padding-top: 6px; border-top: 1px solid var(--line); }
.blog-faq dt { font-weight: 700; margin-top: 18px; }
.blog-faq dd { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }

/* /upcoming: cuts attributed to AI that have not happened yet. The tier badge
   is the entire credibility mechanism of this section - it is how a reader
   tells "the employer said so" from "unconfirmed chatter" - so it must read
   as a label, not run-on text next to the company name. Separator style
   matches .post-row (border-bottom between repeated items) rather than boxed
   cards, since this is a list of items in the same vein as the feed. */
.upcoming-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.upcoming-item h2 { font-size: 18px; margin: 0 0 6px; }
.tier { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-right: 2px; }
/* Border style, not just colour, carries the tier distinction (solid, dashed,
   dotted) so it survives colour-blindness and greyscale print. Tier 1 reads
   as the strongest claim (solid fill, darkest ink), tier 3 the weakest
   (dotted outline, lightest). */
.tier-1 { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.tier-2 { background: #fff7ed; color: var(--accent); border: 1px dashed var(--accent); }
.tier-3 { background: none; color: var(--muted); border: 1px dotted var(--muted); }

/* Company pages: the verified event table. Added 2026-09-22, when a company
   page was still just a feed of the post excerpts that already existed on the
   post pages - 152 words on /company/citigroup, and not one of the 32 had ever
   been crawled. The table is the thing a company page has that its posts do
   not: every AI-attributed loss at that employer, in one place, with the
   source beside it. Scrolls horizontally on a phone rather than forcing the
   page body to. */
.company-events { margin: 22px 0 30px; }
.company-events h2 { font-size: 19px; margin: 0 0 4px; }
.company-events .meta { margin: 0 0 12px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.events-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.events-table th, .events-table td { padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.events-table thead th { font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); border-bottom-width: 2px; white-space: nowrap; }
.events-table td.num, .events-table th.num { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.events-table tbody tr:hover { background: #fafafa; }
.events-table time { white-space: nowrap; }
.events-table tfoot th, .events-table tfoot td { border-bottom: none;
  border-top: 2px solid var(--line); font-weight: 700; }
/* Related reports under a post - plain links, the crawl path to older posts. */
.related { margin: 22px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.related h2 { font-size: 16px; margin: 0 0 8px; }
.related ul { list-style: none; padding: 0; margin: 0 0 10px; }
.related li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.related li a { font-weight: 600; text-decoration: none; }
.related li .meta { display: block; margin-top: 2px; }
/* /ai-layoffs-tracker */
.tracker .lead { font-size: 17px; line-height: 1.55; margin: 0 0 16px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 10px; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.stat-n { font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-l { font-size: 13px; color: var(--muted); }
.tracker h2 { margin-top: 28px; }
.tracker h3 { font-size: 16px; margin: 16px 0 4px; }
.sortable th[data-sort] { cursor: pointer; user-select: none; }
.sortable th[data-sort]::after { content: ' ↕'; opacity: .35; }
.sortable th[aria-sort="ascending"]::after { content: ' ↑'; opacity: 1; }
.sortable th[aria-sort="descending"]::after { content: ' ↓'; opacity: 1; }
.cite { white-space: pre-wrap; background: #f8f8f8; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 13px; }
/* Follow box (hub pages) and /alerts */
.follow-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 18px; }
.follow-box form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.follow-form { flex-direction: column; align-items: stretch !important; }
.follow-label { font-weight: 600; font-size: 14px; }
.follow-row { display: flex; gap: 8px; flex-wrap: wrap; }
.follow-row input { flex: 1 1 220px; font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; }
.follow-on { font-weight: 600; color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert-list { list-style: none; padding: 0; }
.alert-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.alert-list form { margin-left: auto; }
/* The Follow box has to be seen: brand orange button on a warm tint, so it
   reads as the page's one call to action rather than more grey chrome. */
.follow-box { background: #fff7ed; border-color: #fdba74; }
.follow-box .btn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.follow-box .btn:hover { background: #9a3412; border-color: #9a3412; }
.follow-row input { background: #fff; }
.follow-row { align-items: center; }
.follow-row input { height: 36px; box-sizing: border-box; }
.follow-row .btn { height: 36px; align-items: center; }
.follow-form { flex-wrap: nowrap !important; gap: 6px !important; }
.follow-row { flex: 0 0 auto; }
.chart { margin: 26px 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }
.chart .reuse { font-size: 14px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.chart .reuse p { margin: 6px 0 0; color: var(--muted); }
.journalist-note { margin-top: 30px; padding: 4px 18px 10px; border: 1px solid var(--line); border-radius: 8px; }

/* /ai-layoffs-tracker story layer (2026-10). Prefixed t- because .chart,
   .facts and .bar already mean other things on the blog and post pages. */
.tfacts { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.tfacts li { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.tfacts li span { flex: 1; }
.copy { font: inherit; font-size: 12px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff;
  color: var(--muted); cursor: pointer; white-space: nowrap; }
.copy:hover { color: var(--ink); border-color: var(--ink); }
.tchart { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 12px 0 8px; }
.tchart svg { width: 100%; height: auto; display: block; }
.chart-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin: 4px 4px 0; }
.chart-foot a { color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; padding: 10px 12px; background: #fafafa;
  border: 1px solid var(--line); border-radius: 8px; }
.filters select { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); max-width: 100%; }
.filters .meta { margin-left: auto; }
.events-table.ledger { font-size: 13px; }
.events-table.ledger th, .events-table.ledger td { padding: 7px 8px; }
.share-k { display: block; font-size: 11px; color: var(--muted); }
.quote { display: block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #374151; font: inherit;
  font-style: italic; background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.quote:hover { color: var(--ink); text-decoration: underline; }
tr.ledger-expand td { background: #fffbf7; font-style: italic; color: #374151; border-top: none; padding-top: 0; }
.quote-by { font-size: 12px; color: var(--muted); font-style: normal; }
.share-cell { white-space: nowrap; }
.tbar { display: inline-block; height: 8px; background: var(--accent); border-radius: 2px; vertical-align: middle; margin-left: 8px; opacity: .85; }
.is-biggest { font-weight: 600; }
.with-flag { white-space: nowrap; }
.flag-sm { width: 20px; height: 15px; margin: 0 8px 0 0; vertical-align: -2px; display: inline-block; border-radius: 2px; }
.log { list-style: none; padding: 0; margin: 0; }
.log li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.take { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.take .card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.take .card-wide { grid-column: 1 / -1; }
.take h3 { margin: 0 0 6px; font-size: 15px; }
.take p { margin: 0 0 6px; }
.take pre.cite { margin: 6px 0; }
.take iframe { display: block; margin: 6px 0; }