/* 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. */

:root {
  --font-size-xs: 13px;
  --font-size-sm: 14px;
}
.card-head { border-bottom: none; }
.page-grid { padding-bottom: 0; }
.composer { padding: 0 0 20px 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; }
.dropdown-menu.floating[data-slot="header.user_menu"] { min-width: 250px; }

/* ---------- 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,
  body.page-settings .page-grid,
  body.page-messages .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,
  body.page-settings .col-left,
  body.page-messages .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,
  body.page-settings .col-main,
  body.page-messages .col-main {
    border-inline: 1px solid var(--line);
    height: 100%;
    min-height: calc(100dvh - var(--topbar-h, 0px));
  }
  body.page-list .col-right,
  body.page-topic .col-right,
  body.page-profile .col-right,
  body.page-settings .col-right,
  body.page-messages .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 (icon-only markup, see views/topic.php) */
body.page-topic:not(.page-admin) .twitter-back,
body.page-topic:not(.page-admin) .twitter-post-manage .dropdown > .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 .dropdown > .btn { padding: 0; border: 0; background: none; color: var(--text-muted); }
body.page-topic:not(.page-admin) .twitter-post-manage .dropdown > .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. x.com opens it from the bottom tab bar, so this theme keeps no floating menu button
   here (.twitter-menu-fab stays display:none from the rule below); the feed title therefore needs no room made for it. */
body:not(.page-admin) .twitter-menu-fab { display: none; }
@media (max-width: 992px) {
  /* 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); }

/* ---------- growth (/growth, /growth/progress, /growth/checkin, /growth/ranks): the plugin's pages inside the x.com feed column ---------- */
/* the page.options filter gives these pages back their right rail, so the three columns come for free; this file loads after the
   plugin's own stylesheet (app.css, plugins.css, then the theme), so equal specificity already wins — body:not(.page-admin) only
   keeps the admin screens out, it is never needed to outrank growth.css. */
body:not(.page-admin) .growth-head {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  display: block;
  margin: 0 0 4px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--line-soft);
  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) .growth-head h1 { padding: 14px 16px 8px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
/* the four tabs get the feed head's full-width row with the brand underline (the shared "main tab row" look, restated for this bar) */
body:not(.page-admin) .growth-head .growth-tabs { width: 100%; gap: 0; }
body:not(.page-admin) .growth-head .growth-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);
  font-weight: normal;
}
body:not(.page-admin) .growth-head .growth-tabs .tab:hover { background: var(--panel-2); color: var(--text); }
body:not(.page-admin) .growth-head .growth-tabs .tab.active { background: transparent; color: var(--text); font-weight: 700; }
body:not(.page-admin) .growth-head .growth-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) .growth-head .growth-tabs .tab .icon { display: none; }
/* the plugin's own rounded panels melt into the column: flat surface, hairlines between, no shadow */
body:not(.page-admin) .growth-page .card { border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
body:not(.page-admin) .growth-page .card-head { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
body:not(.page-admin) .growth-page .card-head h3 { font-size: 17px; font-weight: 800; }
body:not(.page-admin) .growth-page .card-body { padding: 14px 16px; }
/* the plugin splits its boxes in two at 900px; the feed column is 600px wide, so keep them side by side until a phone */
@media (max-width: 700px) {
  body:not(.page-admin) .growth-top2,
  body:not(.page-admin) .growth-split,
  body:not(.page-admin) .growth-split-cal { grid-template-columns: minmax(0, 1fr); }
  body:not(.page-admin) .growth-split-cal > .growth-col { order: -1; }
}
/* the three number tiles: flush, split by hairlines the way a stat strip reads on X */
body:not(.page-admin) .growth-stats { gap: 1px; background: var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
body:not(.page-admin) .growth-stats a { border: 0; border-radius: 0; background: var(--panel); padding: 12px 16px; }
body:not(.page-admin) .growth-stats a:hover { border: 0; background: var(--panel-2); }
/* hairline rows inside the boxes, hover like a feed row; the boxed rank table goes flush */
body:not(.page-admin) .growth-toplist li,
body:not(.page-admin) .growth-rows li,
body:not(.page-admin) .growth-more-list li,
body:not(.page-admin) .growth-ways li { padding: 9px 0; }
body:not(.page-admin) .growth-table ol { padding: 0 16px; }
body:not(.page-admin) .growth-table li.me { margin: 0 -16px; padding-inline: 16px; }
/* the warm cards keep their tint, squared up like every other block in the column */
body:not(.page-admin) .growth-warm { border-radius: var(--radius-sm); }
/* pill rows (today's tasks) and the segmented board switch take the theme's pill shape */
body:not(.page-admin) .growth-chip { border-radius: var(--radius-pill); }
body:not(.page-admin) .growth-top-tabs { border-radius: var(--radius-pill); }
body:not(.page-admin) .growth-top-tab { border-radius: var(--radius-pill); }

/* ---------- settings (/settings and its tabs): the page.options filter gives these pages both rails, so the three columns come
   for free (the same grid widening as the profile pages above); this section only moves the core's 880px centred shell into the
   feed column and dresses its menu and forms like the rest of x.com. ---------- */
body.page-settings:not(.page-admin) .settings { max-width: none; margin: 0; }
body.page-settings:not(.page-admin) .settings h1 { padding: 14px 16px 10px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
/* the sections menu becomes a rail of pill links inside the column, sticky under the topbar */
body.page-settings:not(.page-admin) .settings-grid { gap: 0; }
body.page-settings:not(.page-admin) .settings-menu { padding: 8px 12px; border-inline-end: 1px solid var(--line-soft); }
body.page-settings:not(.page-admin) .settings-menu h4 { margin: 16px 8px 4px; padding: 0; font-size: var(--font-size-sm); color: var(--text-subtle); }
body.page-settings:not(.page-admin) .settings-menu h4:first-child { margin-top: 4px; }
body.page-settings:not(.page-admin) .settings-menu .side-link { padding: 8px 12px; font-size: var(--font-size-md); }
body.page-settings:not(.page-admin) .settings-body { padding: 0 16px 32px; }
/* flat forms: no card around them, hairlines between rows, the theme's pill button shape already applies */
body.page-settings:not(.page-admin) .settings-form { max-width: none; padding: 16px 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
body.page-settings:not(.page-admin) .settings-form .form-row { padding: 8px 0; }

/* ---------- messages (/messages, /messages/{name}): the plugin's two-pane private chat, kept inside the three-column shell.
   The page.options filter hands this page back both rails, so the standard three columns apply (see the grid block above). The centre
   column is a little wider than a plain feed here so the conversation list and the bubble pane both fit; everything below only re-dresses
   the plugin's own .chat markup with the theme's surfaces and hairlines. These rules start at 761px, so a real phone (≤760px) keeps the
   plugin's full-screen messenger layout untouched. ---------- */
@media (min-width: 761px) {
  body.page-messages:not(.page-admin) .col-main { max-width: 760px; }
  /* the chat fills the column: no outer card, hairlines only inside, so only the log and the list scroll */
  body.page-messages:not(.page-admin) .chat {
    grid-template-columns: 280px minmax(0, 1fr);
    height: calc(100dvh - var(--topbar-h, 0px));
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg);
  }
  body.page-messages:not(.page-admin) .chat-list { border-inline-end: 1px solid var(--line-soft); }
  body.page-messages:not(.page-admin) .chat-list-head { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  body.page-messages:not(.page-admin) .chat-list-head h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  body.page-messages:not(.page-admin) .chat-item { border-bottom: 0; }
  body.page-messages:not(.page-admin) .chat-head { border-bottom: 1px solid var(--line-soft); }
}