/* twitter */
/* Twitter theme — component styles (docs/THEME.md).
 * Colours, radii and sizes come from the tokens in plugin.php; this file only uses variables,
 * color-mix() and logical properties, so light/dark mode and right-to-left all follow for free.
 * The nine templates (views/) add the X markup and drop the top bar and footer; everything below dresses it.
 * Feed-only rules are scoped with body.page-list / body.page-topic and body:not(.page-admin),
 * so admin pages and forms keep their compact, readable look. */

.card-head { border-bottom: none; }
.page-grid { padding-bottom: 0; }
.composer { padding: 0; border: none; }
.editor { border: 0; }
.editor-tabs { border-radius: 0; padding: 0 16px; }
.editor-toolbar { border-bottom: 0; padding: 8px 16px; }
.editor-input { font-size: var(--font-size-md); padding: 8px 24px; }
.footer { border-top: 0; }

/* ---------- top bar: a translucent, blurred header like X ---------- */
.topbar {
  background: color-mix(in srgb, var(--topbar-bg, var(--panel)) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

/* ---------- left rail: big pill navigation, Post button, member chip ---------- */
body:not(.page-admin) .twitter-nav .side-link {
  padding: 11px 14px;
  gap: 16px;
  border-radius: var(--radius-pill);
  font-size: 19px;
  font-weight: 500;
}
body:not(.page-admin) .twitter-nav .side-link .icon { width: 24px; height: 24px; }
body:not(.page-admin) .twitter-nav .side-link:hover { background: var(--panel-2); }
body:not(.page-admin) .twitter-nav .side-link.active { background: transparent; color: var(--text); font-weight: 800; }
body:not(.page-admin) .twitter-nav .side-link.active .icon { color: var(--brand); }
body:not(.page-admin) .twitter-nav .side-group { padding: 14px 14px 4px; display: none; }
/* the notification bell, now a full side-link row in the nav: push its unread badge to the row end */
body:not(.page-admin) .twitter-nav .notif-btn .badge { margin-inline-start: auto; }
body:not(.page-admin) .twitter-post-btn {
  justify-content: center;
  height: 50px;
  margin: 8px 0 18px;
  font-size: 16px;
}
/* the rail fills the viewport height (X): a flex column so the account chip drops to its foot */
body:not(.page-admin) .col-left { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h)); }
/* the account chip is now the user_menu dropdown, pinned to the foot of the rail; its toggle is the avatar + name + handle row */
body:not(.page-admin) .col-left .twitter-account { position: relative; margin-top: auto; padding-top: 10px; }
body:not(.page-admin) .twitter-account-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  color: inherit;
}
body:not(.page-admin) .twitter-account-toggle:hover { background: var(--panel-2); }
body:not(.page-admin) .twitter-account-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
body:not(.page-admin) .twitter-account-chev { margin-inline-start: auto; color: var(--text-muted); }
body:not(.page-admin) .twitter-account-meta b,
body:not(.page-admin) .twitter-account-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.page-admin) .twitter-account-meta b { color: var(--text); font-size: var(--font-size-md); }
body:not(.page-admin) .twitter-account-meta small { color: var(--text-muted); font-size: var(--font-size-sm); }
/* the account menu opens upward, toward the roomy top of the screen, the way X does for its bottom chip */
body:not(.page-admin) .col-left .twitter-account > .dropdown-menu { top: auto; bottom: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: auto; }

/* ---------- three columns, edge to edge like x.com (275px rail / 600px feed / 350px rail, hairlines between) ---------- */
/* the main column is the feed width by default, on every page and every screen: x.com never lets its centre run long */
body:not(.page-admin) .col-main { width: 100%; max-width: var(--twitter-feed, 600px); margin-inline: auto; }
@media (min-width: 1201px) {
  body.page-list .page-grid,
  body.page-topic .page-grid,
  body.page-profile .page-grid {
    --left-w: 275px;
    --right-w: 350px;
    gap: 0;
    padding-top: 0;
  }
  body.page-list .col-left,
  body.page-topic .col-left,
  body.page-profile .col-left {
    top: var(--topbar-h);
    padding: 10px 12px;
    max-height: calc(100vh - var(--topbar-h));
  }
  body.page-list .col-main,
  body.page-topic .col-main,
  body.page-profile .col-main {
    border-inline: 1px solid var(--line);
    min-height: calc(100vh - var(--topbar-h));
  }
  body.page-list .col-right,
  body.page-topic .col-right,
  body.page-profile .col-right { padding: 10px 24px 40px; }
}

/* x.com pins the left rail: at every rail width it is exactly one viewport tall and sticks to the very top, so the feed scrolls
   while the nav, Post button and account chip stay put (the account chip's margin-top:auto keeps it at the foot of that viewport). */
@media (min-width: 993px) {
  body:not(.page-admin) .col-left { top: 0; height: 100vh; max-height: 100vh; overflow-y: auto; }
}

/* ---------- feed head: the page title, then full-width tabs with the brand underline ---------- */
body:not(.page-admin) .twitter-feed-head {
  position: static;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 993px) {
  /* one blurred sticky for both bars: the feed head here and the profile tabs (its own copy used to repeat this verbatim) */
  body:not(.page-admin) .twitter-feed-head,
  body.page-profile:not(.page-admin) .twitter-profile-tabs {
    position: sticky;
    top: var(--topbar-h);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }
  body:not(.page-admin) .twitter-feed-head { z-index: 30; }
  body.page-profile:not(.page-admin) .twitter-profile-tabs { z-index: 20; }
}
body:not(.page-admin) .twitter-feed-title { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
body:not(.page-admin) .twitter-feed-title h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
body:not(.page-admin) .twitter-feed-head .list-head { display: block; margin: 0; padding: 0; border: 0; font-weight: normal; }
body:not(.page-admin) .twitter-feed-head .list-head .list-new-topic { display: none; }
body:not(.page-admin) .twitter-feed-head .tabs { width: 100%; gap: 0; }
/* the main tab row, shared with the profile tabs (see the profile section): one full-width row of centred items with the brand underline */
body:not(.page-admin) .twitter-feed-head .tabs:not(.tabs-sub) .tab,
body.page-profile:not(.page-admin) .twitter-profile-tabs .tabs .tab {
  position: relative;
  flex: 1 1 0;
  justify-content: center;
  height: 50px;
  padding: 0 6px;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--font-size-md);
}
body:not(.page-admin) .twitter-feed-head .tabs:not(.tabs-sub) .tab { font-weight: normal; } /* the profile tabs keep the core weight */
body:not(.page-admin) .twitter-feed-head .tabs:not(.tabs-sub) .tab:hover,
body.page-profile:not(.page-admin) .twitter-profile-tabs .tabs .tab:hover { background: var(--panel-2); color: var(--text); }
body:not(.page-admin) .twitter-feed-head .tabs:not(.tabs-sub) .tab.active,
body.page-profile:not(.page-admin) .twitter-profile-tabs .tabs .tab.active { background: transparent; color: var(--text); font-weight: 700; }
body:not(.page-admin) .twitter-feed-head .tabs:not(.tabs-sub) .tab.active::after,
body.page-profile:not(.page-admin) .twitter-profile-tabs .tabs .tab.active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin-inline: auto;
  width: 56px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}
body:not(.page-admin) .twitter-feed-head .tabs:not(.tabs-sub) .tab .icon { display: none; }
body:not(.page-admin) .twitter-feed-head .tabs-sub { width: auto; padding: 10px 16px; gap: 8px; }
body:not(.page-admin) .twitter-feed-head .tabs-sub .tab {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
body:not(.page-admin) .twitter-feed-head .tabs-sub .tab.active { background: var(--brand); color: var(--brand-text); }

/* ---------- composer row: "What is happening?" ---------- */
body:not(.page-admin) .twitter-compose {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-subtle);
}
body:not(.page-admin) .twitter-compose:hover { background: var(--panel-2); }
body:not(.page-admin) .twitter-compose-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.page-admin) .twitter-compose-btn { flex: none; }

/* ---------- the feed itself: flush rows split by hairlines ---------- */
body:not(.page-admin) .twitter-list,
body:not(.page-admin) .twitter-rows { background: var(--bg); border: 0; border-radius: 0; }
body:not(.page-admin) .twitter-post { gap: 12px; padding: 12px 16px; cursor: pointer; } /* the whole row opens the topic (assets/theme.js); links and buttons keep their own cursor */
body:not(.page-admin) .twitter-post a,
body:not(.page-admin) .twitter-post button { cursor: pointer; }
body:not(.page-admin) .twitter-post:hover { background: var(--panel-2); }
body:not(.page-admin) .twitter-post-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--font-size-md); line-height: 1.4; }
body:not(.page-admin) .twitter-post-name { font-weight: 700; }
body:not(.page-admin) .twitter-post-handle,
body:not(.page-admin) .twitter-post-dot,
body:not(.page-admin) .twitter-post-time { color: var(--text-muted); font-weight: 400; }
body:not(.page-admin) .twitter-post-cat {
  margin-inline-start: auto;
  padding: 1px 10px;
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
body:not(.page-admin) .twitter-post-title { margin: 2px 0 8px; font-size: var(--font-size-md); font-weight: 400; line-height: 1.45; }
body:not(.page-admin) .twitter-post-actions { gap: 22px; font-size: var(--font-size-sm); }
body:not(.page-admin) .twitter-post-actions .meta { gap: 5px; }
body:not(.page-admin) .twitter-post-actions .meta:hover { color: var(--brand); }
body:not(.page-admin) .twitter-post-actions .meta .icon { width: 15px; height: 15px; }

/* ---------- feed pictures: a Weibo-style grid, three squares per row at most ---------- */
body:not(.page-admin) .twitter-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 0 10px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
body:not(.page-admin) .twitter-media-cell { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--panel-2); }
body:not(.page-admin) .twitter-media-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
body:not(.page-admin) .twitter-media-cell:hover img { opacity: .85; }
/* one picture alone keeps its natural ratio and reads bigger than a grid cell, as on Weibo */
body:not(.page-admin) .twitter-media-n1 .twitter-media-cell { aspect-ratio: auto; }
body:not(.page-admin) .twitter-media-n1 .twitter-media-cell img { position: static; width: auto; height: auto; max-width: 100%; max-height: 260px; margin-inline: auto; object-fit: contain; }

/* ---------- right rail: the X search field, then the cards ---------- */
body:not(.page-admin) .twitter-search {
  width: 100%;
  height: 44px;
  margin: 0 0 16px;
  background: var(--panel-2);
  border-color: transparent;
}
body:not(.page-admin) .twitter-search:focus-within { background: var(--bg); border-color: var(--brand); }
body:not(.page-admin) .twitter-search input { font-size: var(--font-size-md); }
body:not(.page-admin) .col-right .card { border-radius: var(--radius); }
body:not(.page-admin) .col-right .card-head h3 { font-size: 16px; font-weight: 700; }
/* the left rail already carries the Post button, so the account card does not repeat it */
body:not(.page-admin) .card-me-card [data-action="new"] { display: none; }

/* On a wide page the right rail carries the search, as on X (pages without a right column, phones and the admin keep the rail's) */
@media (min-width: 993px) {
  body:not(.page-admin):not(.no-right) .twitter-utils .search-form { display: none; }
}

/* ---------- topic page: posts as a stream, not floating cards ---------- */
body:not(.page-admin) .post-stream { gap: 0; }
body:not(.page-admin) .post {
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
}

/* ---------- the opening post, the way X shows a single tweet: a back row (chevron + title) above the poster line,
   bold name (with @handle when the display name differs), 23px text, then a hairline and an edge-to-edge row
   of round icon actions (counts stay); the numbers bar is gone, Bookmark sits in that row and Manage at the line's end ---------- */
body.page-topic:not(.page-admin) .twitter-topic-top { display: flex; align-items: center; gap: 6px; margin: 0 -8px 10px; }
/* the top line's two round 36px buttons share one block: the back chevron and the Manage toggle */
body.page-topic:not(.page-admin) .twitter-back,
body.page-topic:not(.page-admin) .twitter-post-manage > .btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; }
body.page-topic:not(.page-admin) .twitter-back { color: var(--text); }
body.page-topic:not(.page-admin) .twitter-back:hover { background: var(--panel-2); }
body.page-topic:not(.page-admin) .twitter-back .icon { width: 20px; height: 20px; }
body.page-topic:not(.page-admin) .twitter-topic-top .topic-title { min-width: 0; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-topic:not(.page-admin) .topic-meta { display: none; } /* X shows no reply/view numbers bar; the back chevron carries the way to the category */
body.page-topic:not(.page-admin) .twitter-post-manage { flex: none; margin-inline-start: auto; }
body.page-topic:not(.page-admin) .twitter-post-manage > .btn { padding: 0; border: 0; background: none; color: var(--text-muted); }
body.page-topic:not(.page-admin) .twitter-post-manage > .btn > span { display: none; }
body.page-topic:not(.page-admin) .twitter-post-manage > .btn:hover { background: var(--panel-2); color: var(--text); }
body.page-topic:not(.page-admin) .post.first { padding: 16px 16px 12px; }
body.page-topic:not(.page-admin) .post.first .post-name { font-size: var(--font-size-lg); }
body.page-topic:not(.page-admin) .post.first .post-name .user-link { font-weight: 700; }
body.page-topic:not(.page-admin) .post.first .twitter-post-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* colour and weight come from the feed rule on .twitter-post-handle */
body.page-topic:not(.page-admin) .post.first .post-floor { display: none; } /* X has no floor number on a tweet page; the time link below is the permalink */
body.page-topic:not(.page-admin) .post.first .post-content { font-size: 17px; line-height: 1.5; }
body.page-topic:not(.page-admin) .post.first .post-actions {
  display: flex;
  margin: 16px -8px 0;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  gap: 0;
}
body.page-topic:not(.page-admin) .post.first .post-actions .act, /* the row's children are either an .act or a form.action-form wrapping one (like, delete) */
body.page-topic:not(.page-admin) .post.first .post-actions > .action-form { flex: 1 1 0; min-width: 0; }
body.page-topic:not(.page-admin) .post.first .post-actions > .action-form { display: flex; }
body.page-topic:not(.page-admin) .post.first .post-actions .act { justify-content: center; padding: 6px 4px; border-radius: 0; background: none; color: var(--text-muted); gap: 6px; }
body.page-topic:not(.page-admin) .post.first .post-actions .act .icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: transparent; }
body.page-topic:not(.page-admin) .post.first .post-actions .act > span { display: none; } /* X: icon and count only */
body.page-topic:not(.page-admin) .post.first .post-actions .act > span[data-count]:not(:empty) { display: inline; font-size: var(--font-size-sm); }
body.page-topic:not(.page-admin) .post.first .post-actions .act:hover { background: none; color: var(--brand); }
body.page-topic:not(.page-admin) .post.first .post-actions .act:hover .icon { background: color-mix(in srgb, var(--brand) 10%, transparent); }
body.page-topic:not(.page-admin) .post.first .post-actions .act.active { color: var(--brand); }
@media (max-width: 640px) {
  body.page-topic:not(.page-admin) .post.first .post-content { font-size: 20px; }
}

/* ---------- phone: the compose button floats (the rail is a drawer there) ---------- */
body:not(.page-admin) .twitter-fab {
  position: fixed;
  inset-inline-end: 18px;
  bottom: 20px;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-text);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 45%, transparent);
}
body:not(.page-admin) .twitter-fab:hover { background: var(--brand-hover); color: var(--brand-text); }
body:not(.page-admin) .twitter-fab .icon { width: 26px; height: 26px; }
/* the tab bar exists for phones only; wider screens have the rail */
body:not(.page-admin) .tabbar { display: none; }
@media (max-width: 992px) {
  body:not(.page-admin) .twitter-fab { display: inline-flex; bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* x.com bottom tab bar (layout builds it for members on rail pages): fixed to the foot, blurred like the feed head; the badge is
     the server-side count, the drawer's bell row stays the single [data-unread] that app.js keeps fresh */
  body:not(.page-admin) .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: flex; align-items: stretch; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); padding-bottom: env(safe-area-inset-bottom); }
  body:not(.page-admin) .tabbar a { position: relative; flex: 1 1 0; display: grid; place-items: center; height: 53px; color: var(--text-muted); }
  body:not(.page-admin) .tabbar a:hover, body:not(.page-admin) .tabbar a.active { color: var(--text); }
  body:not(.page-admin) .tabbar .icon { width: 24px; height: 24px; }
  body:not(.page-admin) .tabbar .badge { position: absolute; top: 9px; inset-inline-start: calc(50% + 6px); }
  /* the foot would otherwise hide the last row behind the bar */
  body:not(.page-admin):has(.tabbar) { padding-bottom: calc(53px + env(safe-area-inset-bottom)); }
}

/* ---------- buttons and cards ---------- */
.card { border-color: var(--twitter-card-line, var(--line)); }
.btn-primary { box-shadow: none; }
.btn:active { transform: scale(.98); }

/* ---------- the shell: no top bar, no footer bar (x.com's three columns) ---------- */
/* With the header gone the feed and rails reach the very top, so the sticky offsets collapse to zero. Admin keeps the core
   layout (theme templates never run there) and its real top bar, so this is scoped to the twitter-shell body only. */
body.twitter-shell { --topbar-h: 0px; }

/* brand: the logo leads the left rail, the way the X bird does */
body:not(.page-admin) .twitter-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; }
body:not(.page-admin) .twitter-brand .logo { margin-inline-end: 0; font-size: var(--font-size-xl); }
body:not(.page-admin) .twitter-brand .logo img { height: 34px; width: auto; }

/* the leftover top-bar controls (new topic, language, theme, search): hidden whenever a left rail carries them;
   a page with no left rail falls back to showing the bar under main so language, theme and the account menu stay reachable */
body:not(.page-admin) .twitter-utils { margin: 0; padding: 0 2px 10px; gap: 4px; flex-wrap: wrap; }
body:not(.page-admin) .twitter-utils .search-form { flex: 1; min-width: 0; }
body:not(.page-admin):not(.no-left) .twitter-utils { display: none; }
/* pages with no right column fall back to a bar across the top of main */
body:not(.page-admin).no-right .col-main > .twitter-utils { justify-content: flex-end; padding: 0 0 12px; }

/* site nav (header.nav): the rail shows it on every width, not just the phone drawer */
body:not(.page-admin) .drawer-nav.twitter-topnav { display: block; }
body:not(.page-admin) .twitter-topnav { margin-bottom: 6px; }

/* the footer the shell moved to the foot of the right rail (or under main when a page has no right column) */
body:not(.page-admin) .twitter-foot { background: none; margin-top: 8px; padding: 14px 2px; line-height: 2; }
body:not(.page-admin) .twitter-foot, body:not(.page-admin) .twitter-foot .footer-links a { color: var(--text-subtle); font-size: var(--font-size-sm); }
body:not(.page-admin) .twitter-foot .footer-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
body:not(.page-admin) .twitter-foot .region { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* phone: the rail is a drawer, so a floating menu button opens it; the feed title makes room for it */
body:not(.page-admin) .twitter-menu-fab { display: none; }
@media (max-width: 992px) {
  body:not(.page-admin) .twitter-menu-fab { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 60; display: inline-flex; }
  body:not(.page-admin) .twitter-feed-title { padding-inline-start: 52px; }
  /* the core shows its category bar (cat-bar-mobile) only on small screens, where the desktop left rail became a drawer.
     This theme keeps the categories in that drawer rail at every width, so the phone-only bar would duplicate it: hide it.
     The core rule is a display:flex inside the same media query; this later, stronger selector simply wins over it. */
  body:not(.page-admin) .cat-bar-mobile { display: none; }
}

/* ---------- profile: an x.com profile (cover, overlapping avatar, inline stats, underline tabs, flush timeline) ---------- */
/* it now runs through the same three-column shell as the feed (page.options gives back the right rail; the wide block caps and
   borders col-main), so the profile fills its column and only restyles the header, tabs and timeline below. */
body:not(.page-admin) .twitter-profile { background: var(--bg); }
/* the head drops all card chrome, the way X draws it flush */
body:not(.page-admin) .twitter-profile-card { display: block; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
body:not(.page-admin) .twitter-profile-cover { height: 200px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--panel))); }
@media (max-width: 640px) { body:not(.page-admin) .twitter-profile-cover { height: 150px; } }
/* the avatar overlaps the cover's lower edge; the actions float top-right over the cover, like X */
body:not(.page-admin) .twitter-profile-bar { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 16px; margin-top: -60px; }
body:not(.page-admin) .twitter-profile-bar .avatar { flex: none; border: 4px solid var(--bg); border-radius: 50%; background: var(--brand); }
body:not(.page-admin) .twitter-profile-actions { padding-top: 4px; }
body:not(.page-admin) .twitter-profile-id { padding: 12px 16px 0; }
body:not(.page-admin) .twitter-profile-id .profile-name { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: -.01em; }
body:not(.page-admin) .twitter-profile-id .profile-handle { color: var(--text-muted); }
/* the number tiles become the inline stat row under the bio ("12 Topics · 34 Likes") */
body:not(.page-admin) .twitter-profile-stats { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 12px 16px 14px; border: 0; }
body:not(.page-admin) .twitter-profile-stats .pstat { flex-direction: row; align-items: baseline; gap: 5px; padding: 0; background: none; color: var(--text-muted); font-size: var(--font-size-md); }
body:not(.page-admin) .twitter-profile-stats .pstat b { color: var(--text); font-size: var(--font-size-md); }
body:not(.page-admin) .twitter-profile-stats a.pstat:hover { background: none; }
body:not(.page-admin) .twitter-profile-stats a.pstat:hover b { color: var(--brand); text-decoration: underline; }
/* full-width tabs with the brand underline (override the core segmented look); the tab items themselves
   are dressed by the shared feed-head rules ("the main tab row"), which list this bar's selector beside it */
body.page-profile:not(.page-admin) .twitter-profile-tabs.list-head { display: block; justify-content: flex-start; margin: 0; padding: 0; border-bottom: 1px solid var(--line-soft); }
body.page-profile:not(.page-admin) .twitter-profile-tabs .tabs { width: 100%; gap: 0; padding: 0; background: none; border-radius: 0; overflow: visible; }
/* the timeline sits flush in the column, not in a bordered card */
body.page-profile:not(.page-admin) .twitter-profile-list { background: var(--bg); border: 0; border-radius: 0; box-shadow: none; }
body.page-profile:not(.page-admin) .twitter-profile-list > .list-head { border-bottom: 0; }
/* one column: the sections plugins add stack full-width under the timeline (X has no side column) */
body.page-profile:not(.page-admin) .twitter-profile-body { display: block; }
body.page-profile:not(.page-admin) .twitter-profile-aside { position: static; min-width: 0; margin-top: 16px; padding: 16px; border-top: 1px solid var(--line-soft); }