/* Frame — "Common professional" layer (DESIGN.md §C). Loaded LAST; replaces the rounded-minimal look.
   Familiar social-app conventions, original styling: flat timelines with hairline dividers, circular avatars,
   pill buttons, system fonts, 600px centre column. Purple (#7C5CFF) only for the primary action, the active
   tab indicator and links; neutral greys everywhere else. Original code; no third-party assets. */

/* ===== Tokens ===== */
:root {
  --font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-sys); --font-display: var(--font-sys);
  --fs: 15px; --fs-body: 15px; --fs-small: 13px; --fs-title: 20px; --track: 0;
  --r-av: 50%;          /* avatars: circles */
  --r-btn: 9999px;      /* buttons: pills, everywhere */
  --r-box: 8px;         /* containers (modals, menus, settings groups, rail boxes): 8px max */
  --r-media: 12px;      /* post media / video / quote / link cards: 12px max */
  --r-thumb: 6px;       /* small thumbnails and tiles */
  --r-card: var(--r-box); --r-chip: var(--r-btn); --r-sheet: var(--r-box); --r-tile: var(--r-thumb);
  --col: 600px; --col-wide: 920px; --ctx: 350px; --rail: 260px;
  --divider: var(--border);
}
[data-theme="dark"], :root { --divider: #2A2930; }
[data-theme="light"] { --divider: #E6E5EB; }

body, button, input, textarea, select { font-family: var(--font-sys) !important; letter-spacing: 0 !important; font-feature-settings: normal !important; }
body { font-size: 15px; line-height: 20px; }

/* ===== Type: clear weight hierarchy (20/700 titles · 15/700 names · 15/400 body · 13/400 meta) ===== */
.t-display, .t-title1, .fr-title, .topbar h2, .dc-head .fr-title, .ev-title, .fr-ph .profile-name, .empty h2, .dm-empty h2, .auth-body h2 { font: 700 20px/24px var(--font-sys) !important; letter-spacing: 0 !important; }
.fr-ph .profile-name { font-size: 20px !important; }
.wordmark .wm-text, .m-top .wm-text { font: 800 22px/1 var(--font-sys) !important; letter-spacing: -.01em !important; }
.post-head .name, .user-row .name, .dm-item .name, .notif .name { font-weight: 700 !important; }
.post-head .meta, .post-head .meta * { font-size: 15px; font-weight: 400; }
.post-text { font-size: 15px !important; line-height: 20px !important; }
.sec-title, .card h3, .card-h h3, .sidebar h2, .section-title { font: 800 20px/24px var(--font-sys) !important; color: var(--text) !important; letter-spacing: 0 !important; }
.t-micro, .fp-label, .set-sub, .muted.small, .small { font-size: 13px !important; }
.now-tag, .now-card .now-tag, .now-card.lead .now-tag { font-family: var(--font-sys) !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.fr-landing .right h1 { font: 800 56px/60px var(--font-sys) !important; letter-spacing: -.01em !important; }

/* ===== Shell: left sidebar (icon + label) · 600px centre · right rail ===== */
.layout { gap: 0; }
.sidenav { border-right: 0 !important; }
.primary { width: var(--col); border-left: 1px solid var(--divider) !important; border-right: 1px solid var(--divider) !important; }
.layout.wide .primary { width: var(--col-wide); }
.sidebar { width: var(--ctx); margin-left: 28px; }
.nav-item > span { border-radius: var(--r-btn) !important; padding: 10px 16px 10px 12px; gap: 18px; color: var(--text) !important; background: transparent !important; font-weight: 400 !important; font-size: 19px; }
.nav-item:hover > span { background: var(--hover) !important; }
.nav-item .ic svg { width: 26px; height: 26px; stroke-width: 1.75; }
/* active = bold label + filled icon, neutral colour (purple is kept for tabs, links and the primary action) */
.nav-item.active > span { color: var(--text) !important; font-weight: 700 !important; background: transparent !important; }
.nav-item.active .ic svg { stroke-width: 2.25; }
.nav-item.active .ic svg .f { fill: currentColor; }
.nav-item.active .ic svg .d { stroke: var(--bg); }
.layout[data-page=watch] .m-bar .nav-item.active .ic svg .d { stroke: #000; }
.nav-item .badge, .nav-icon .badge { box-shadow: 0 0 0 2px var(--bg); }
.post-btn { border-radius: var(--r-btn) !important; height: 52px; font: 700 17px/1 var(--font-sys) !important; }
.account-switch { border-radius: var(--r-btn) !important; }
.account-switch:hover { background: var(--hover); }

/* topbars: plain, translucent, hairline under */
.topbar { background: var(--blur-bg) !important; border-bottom: 1px solid var(--divider) !important; }
.topbar .tabs, .topbar nav.tabs { border-bottom: 0 !important; }

/* ===== Tabs: underline with a purple bar on the active tab ===== */
.tab { color: var(--muted) !important; font-weight: 500 !important; min-height: 52px; }
.tab:hover { background: var(--hover) !important; color: var(--text) !important; }
.tab.active { color: var(--text) !important; font-weight: 700 !important; }
.tab.active > span::after { background: var(--accent) !important; height: 4px !important; border-radius: 9999px !important; }
.seg-tabs .tab, .chip-tab.tab { min-height: 44px; padding: 0 14px !important; border-radius: 0 !important; border: 0 !important; }
.watch-top .tab { min-height: 36px; border-radius: var(--r-btn) !important; }

/* ===== Timelines: flat, full-width rows separated by 1px hairlines ===== */
article.post, article.post:hover { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--divider) !important; border-radius: 0 !important; margin: 0 !important; padding: 12px 16px 4px !important; box-shadow: none !important; }
article.post:hover { background: var(--row-hover) !important; }
.post.no-border { border-bottom-color: transparent !important; }
.feed, .timeline, #feed, .posts { gap: 0 !important; padding: 0 !important; }
.detail { border-bottom: 1px solid var(--divider); }
.user-row, .notif, .dm-item, .trend, .list-row, .comm-row, .set-item { border-radius: 0 !important; }
.notif, .user-row:not(.card .user-row):not(.sidebar .user-row), .list-row { border-bottom: 1px solid var(--divider); }
.caught-up { border-top: 0; }
.caught-up > span:first-child { border-radius: 50% !important; }

/* action row under posts: reply · repost · like · views · share, spread evenly like the familiar pattern */
.post-actions { display: flex; justify-content: space-between; max-width: 440px; margin-top: 4px !important; }
.post-actions .act { color: var(--muted) !important; border-radius: var(--r-btn); }
.post-actions .act .ic svg { width: 18px; height: 18px; stroke-width: 1.75; }
.post-actions .act .bubble { border-radius: 50% !important; }

/* ===== Avatars: circles everywhere ===== */
.avatar, .avatar.lg, .ring > .avatar, .vr-av .avatar, .profile-top .p-av, .p-av, .hl-cover, .hl-cover img, .hl-cover > span { border-radius: 50% !important; }
.ring { border-radius: 50% !important; }

/* ===== Media: 12px max; thumbnails 6px ===== */
.post-media, .post-video, .post-media img, .link-card, .quote, .quote-card, .car, .c-media, .c-video video, .post-gif figure.gif, .preview-post, .lpv, .pc-stage, .vstage, .msg-gif figure.gif { border-radius: var(--r-media) !important; }
.post-media, .post-video, .link-card, .quote, .quote-card { border: 1px solid var(--divider) !important; overflow: hidden; }
.post-gif figure.gif, .msg-gif figure.gif { border: 0 !important; }
.gp-tile, .gp-cell, .gr-gif, .n-gif, .coll-card img, .coll-card .coll-ph, .list-thumb, .comm-thumb, .sv-gifbar button, .lpv.stage i, .vg-sample, .sc-sk, .sc-skform, .car-count, .rx.rx-gif { border-radius: var(--r-thumb) !important; }
.hero-banner, .p-banner, .profile-banner, .fr-ph .banner { border-radius: 0 !important; }

/* ===== Buttons: pills ===== */
.btn, .btn-sq, .pill, .chip, .gp-chips .chip, .ctx-add, .ctx-rate .chip, .reply-audience, .new-posts-pill button, .poll-opt, .gs-btn, .gif-badge, .rx-gif-pick, .sv-btn, .sv-foot .sv-btn[data-reshare], .vr-follow, .na-tag, .rel-chip, .seg, .ev-head .seg, .ev-head .seg a, .ev-head .seg button { border-radius: var(--r-btn) !important; }
.btn { font-weight: 700 !important; }
.btn-outline, .follow-btn.following, .btn-sq { background: transparent !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; }
.btn-outline:hover, .btn-sq:hover { background: var(--hover) !important; }
.follow-btn:not(.following) { background: var(--text) !important; color: var(--bg) !important; border: 0 !important; }
.icon-btn, .msg-react-btn, .st-arrow, .car-arrow, .gp-fav, .v-mute, .sv-ic, .vr-ic, .vnav .icon-btn { border-radius: 50% !important; }
.searchbox, .gp-search { border-radius: var(--r-btn) !important; background: var(--surface-1) !important; border: 1px solid transparent !important; }
.searchbox:focus-within, .gp-search:focus-within { border-color: var(--accent) !important; background: var(--bg) !important; }

/* ===== Containers: 8px max ===== */
.modal, .popover, .menu, .card, .gp, .is-sheet .gp, .vsheet, .sv, .toast, .tip-card, .na-banner, .dm-req-banner, .data-stat, .theme-opt, .mode-card, .mode-row, .al-res, .poll-editor, .note-bub, .p-note, .pe-invite, .sv-sticker, .sv-quick, .sc-canvas, .err-frame, .empty .big, .mod-item, .mod-item blockquote, .rep-list label, .menu-item, .sheet-list .menu-item, .create-sheet .menu-item > .ic, .create-pop .menu-item .ic, .mode-ic, .swatch > span, .fs-slider, .gr-row, .v-ctx, .sv-cf, .wordmark, .legal-doc, .set-group, .settings-group { border-radius: var(--r-box) !important; }
.popover, .menu { box-shadow: 0 0 15px rgba(0,0,0,.12), 0 0 3px rgba(0,0,0,.08) !important; border: 1px solid var(--divider) !important; }
[data-theme="dark"] .popover, :root:not([data-theme="light"]) .popover { box-shadow: 0 0 15px rgba(255,255,255,.06), 0 0 3px rgba(255,255,255,.08) !important; }
.menu-item { border-radius: 0 !important; }
/* right-rail boxes: bordered 8px groups (search pinned on top) */
.sidebar .card { background: transparent !important; border: 1px solid var(--divider) !important; border-radius: var(--r-box) !important; padding: 0 0 4px !important; margin-bottom: 16px !important; overflow: hidden; }
.sidebar .card h3, .sidebar .card .card-h { padding: 12px 16px 8px !important; }
.sidebar .card .row, .sidebar .trend, .sidebar .user-row { padding-left: 16px !important; padding-right: 16px !important; }

/* chat bubbles keep the familiar rounded shape (documented exception), everything around them is flat */
.msg, .mine .msg { border-radius: 18px !important; }
.dm-compose .box, .sv-reply { border-radius: var(--r-btn) !important; }

/* ===== Profile header: standard banner → circular avatar overlapping → name, handle, bio, counts ===== */
.fr-ph .p-av, .profile-top .p-av { box-shadow: 0 0 0 4px var(--bg) !important; }

/* ===== Purple discipline: neutral greys for chrome; purple = primary action, active tab bar, links ===== */
.icon-btn.accent { color: var(--muted) !important; }
.nav-item.active .nav-icon .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text) !important; }
.link, .post-text a, .profile-bio a, .card-h a, .sec-link, .show-more { color: var(--accent-ink) !important; }

/* ===== Mobile: top bar + bottom tab bar ===== */
@media (max-width: 767px) {
  .primary { border: 0 !important; }
  .m-top { background: var(--blur-bg) !important; border-bottom: 1px solid var(--divider) !important; height: 53px; }
  .m-bar { background: var(--bg) !important; border-top: 1px solid var(--divider) !important; height: calc(56px + env(safe-area-inset-bottom)) !important; }
  .m-bar .nav-item > span { padding: 6px 4px !important; font-size: 11px; gap: 2px; border-radius: 0 !important; }
  .m-bar .nav-item .ic svg { width: 24px; height: 24px; }
  .m-bar .nav-item.active > span { color: var(--text) !important; }
  .m-bar .nav-item.active > span::before { display: none !important; }
  .m-bar .nav-create .nav-icon { border-radius: var(--r-btn) !important; width: 48px !important; height: 32px !important; }
  article.post, article.post:hover { padding: 12px 12px 4px !important; }
  .post-actions { max-width: none; }
  .layout[data-page=watch] .m-bar { background: rgba(0,0,0,.6) !important; border-top-color: transparent !important; }
}

/* ===== Stories strip: neutral rings (purple is reserved), circular ===== */
.ring { border-radius: 50% !important; }
.ring.unseen, .p-av.ring.unseen { box-shadow: inset 0 0 0 2px var(--text) !important; }
.ring.seen, .p-av.ring.seen { box-shadow: inset 0 0 0 1px var(--border-strong) !important; }
.st-add { background: var(--text) !important; color: var(--bg) !important; border-radius: 50% !important; box-shadow: 0 0 0 2px var(--bg) !important; }
.stories, .st-strip { border-bottom: 1px solid var(--divider); }

/* ===== Full-width rows: feeds have no side gutters ===== */
.feed-items { gap: 0 !important; padding: 0 !important; }
#p-feed .pgrid, #p-feed .vgrid { padding: 0 !important; }
.composer, .inline-composer, .fr-composer { border-bottom: 1px solid var(--divider); }

/* ===== Standard profile header: full-width banner → circular avatar overlapping its lower edge → actions top-right
   → name, handle, bio, meta, counts → text tabs ===== */
.fr-cover { display: block !important; height: 200px !important; margin: 0 !important; border-radius: 0 !important; background-size: cover; background-position: center; }
.fr-ph { position: relative; padding: 0 16px !important; }
.fr-ph .profile-top { display: block !important; margin-top: 0 !important; }
.fr-ph .profile-top .p-av { margin-top: -68px !important; width: max-content; padding: 0 !important; background: transparent !important; border-radius: 50% !important; }
.fr-ph .profile-top .p-av .avatar.lg { width: 134px !important; height: 134px !important; font-size: 48px !important; box-shadow: 0 0 0 4px var(--bg); }
.fr-ph .fr-id { margin-top: 12px; padding-top: 0 !important; }
.fr-ph .profile-counts { margin-top: 12px; display: flex; gap: 20px; }
.fr-ph .profile-counts b { font-weight: 700; }
.fr-ph .profile-actions { position: absolute; top: 12px; right: 16px; margin: 0 !important; flex-wrap: nowrap; }
.fr-ph .profile-actions > .btn:first-child { min-width: 0 !important; }
.fr-ph .profile-actions .btn { height: 36px; padding: 0 16px; }
.fr-ph .profile-bio, .fr-ph .profile-meta, .fr-ph .known { margin-top: 12px; }
#p-highlights { margin: 12px 0 4px; }
.p-tabs { border-bottom: 1px solid var(--divider) !important; }
.p-tabs .tab { flex: 1 0 auto; padding: 0 16px !important; }
.p-tabs .tab .ic { display: none !important; }
.p-tabs .tab em { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; font-size: 15px; font-style: normal; }
.layout[data-page=profile] .post-btn { background: var(--accent-fill) !important; color: var(--on-accent) !important; }
@media (max-width: 767px) {
  .fr-cover { height: 120px !important; }
  .fr-ph .profile-top .p-av { margin-top: -40px !important; }
  .fr-ph .profile-top .p-av .avatar.lg { width: 80px !important; height: 80px !important; font-size: 30px !important; }
  .fr-ph .profile-actions { top: 10px; right: 12px; }
  .fr-ph .profile-actions > .btn { flex: none !important; }
  .fr-ph .profile-actions .btn span { display: inline; }
  .fr-ph .profile-actions a.btn-outline > span:not(.ic) { display: none; }
  .fr-ph .profile-actions a.btn-outline { width: 36px; padding: 0; justify-content: center; }
}

/* Activity rows: flat with hairline dividers, like the timeline */
.notif, .notif:hover { border-radius: 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--divider) !important; padding: 12px 16px !important; }
.notif:hover { background: var(--row-hover) !important; }

/* On-states under posts (liked, reposted, saved, GIF-reacted): filled / bold icon in the text colour.
   Purple stays reserved for the primary action, the active tab and links. */
.act.like.on, .act.like.on .ic, .act.rt.on, .act.rt.on .ic, .act.gr.on, .act.gr.on .ic, .act.bm.on, .act.bm.on .ic { color: var(--text) !important; }
.act.like.on .ic svg, .act.bm.on .ic svg { fill: currentColor; }
.act.rt.on .ic svg { stroke-width: 2.5; }
.pe-flag, .pe-flag.fav, .pe-flag .ic, .rel-chip, .rel-chip .ic { color: var(--muted) !important; }

/* One purple primary per screen: on Create, Lists and Messages the page's own action (Start a post / New list /
   New message) is the primary, so the sidebar Post becomes a neutral pill there. */
.layout[data-page=create] .post-btn, .layout[data-page=lists] .post-btn, .layout[data-page=messages] .post-btn { background: var(--surface-2) !important; color: var(--text) !important; }

/* Narrower desktops: the right rail gives up width before the centre column does (keeps Watch's side nav clear of its action rail). */
@media (max-width: 1279px) { :root { --ctx: 300px; } .sidebar { margin-left: 16px; } }
/* Watch: the selected feed pill is light with dark text on the video (it sits over footage, not on the page background). */
.watch-top .tab.active { color: #0E0E11 !important; background: #F4F3F7 !important; }
.watch-top .tab:not(.active) { color: rgba(244,243,247,.75) !important; }
.watch-top .tab:hover { background: rgba(244,243,247,.1) !important; }
.watch-top .tab.active > span::after { display: none !important; }

/* Watch in the 600px column: reserve a lane for the up/down arrows so they never sit on the action rail
   (they overlapped like/reply at 1024-1366px; stage shrinks a little and letterboxes). */
@media (min-width: 701px) {
  .vslide { padding-right: 56px; }
  .vnav { right: 10px; }
}