/* Ported from Flask templates/feed.html for Rust/Tera feed visual parity. */

    :root {
      --bg: #0f1117;
      --bg2: #151924;
      --bg3: #1f2634;
      --bg4: #263044;
      --card: color-mix(in srgb, var(--bg2) 92%, white 8%);
      --card-strong: color-mix(in srgb, var(--bg3) 92%, white 8%);
      --border: rgba(148, 163, 184, .18);
      --border2: rgba(148, 163, 184, .28);
      --text: #eef2ff;
      --text2: #aab6cf;
      --text3: #718096;
      --accent: #5b6cff;
      --accent-hover: #4657f0;
      --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
      --green: #34d399;
      --red: #fb7185;
      --partner: #2dd4bf;
      --metamour: #f59e0b;
      --ex: #ec4899;
      --other: #94a3b8;
      --row-hover: color-mix(in srgb, var(--accent) 10%, transparent);
      --shadow: 0 20px 60px rgba(0,0,0,.30);
      --shadow-soft: 0 14px 34px rgba(0,0,0,.18);
      --radius: 20px;
      --radius-sm: 14px;
      --glow: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 20%, transparent), transparent 36%);
    }
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f5f7fb;
        --bg2: #ffffff;
        --bg3: #f1f4f9;
        --bg4: #e9edf6;
        --card: rgba(255,255,255,.92);
        --card-strong: #ffffff;
        --border: rgba(15, 23, 42, .10);
        --border2: rgba(15, 23, 42, .16);
        --text: #172033;
        --text2: #64748b;
        --text3: #94a3b8;
        --accent: #4f63ff;
        --accent-hover: #3448e6;
        --green: #10b981;
        --red: #ef4444;
        --partner: #14b8a6;
        --metamour: #f59e0b;
        --ex: #ec4899;
        --other: #94a3b8;
        --row-hover: rgba(79,99,255,.08);
        --shadow: 0 24px 80px rgba(15, 23, 42, .12);
        --shadow-soft: 0 12px 35px rgba(15, 23, 42, .09);
      }
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    /* Android WebView's TEXT_AUTOSIZING layout algorithm rescales text
       independently of CSS and breaks the feed's width math (it only honors
       `none`, not `100%`). Disable it explicitly on every feed element so
       the rendered post layout matches the stylesheet exactly. */
    html, body, .feed-app, .post, .post-body, .post-author, .composer,
    .post-image, .post-video, .post-social-row, .post-social-btn,
    .post-action, .post-reply-count {
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }
    body {
      min-height: 100vh;
      min-height: 100dvh;
      background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%),
        radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--partner) 10%, transparent), transparent 30%),
        var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-text-size-adjust: 100%;
      overflow-x: hidden;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    button, textarea, input, select { font: inherit; }
    button {
      min-height: 38px;
      border: 0;
      border-radius: 12px;
      padding: 8px 13px;
      background: var(--accent);
      color: var(--on-accent, #fff);
      font-size: .84rem;
      font-weight: 760;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    }
    button:hover { background: var(--accent-hover); transform: translateY(-1px); }
    button:active { transform: translateY(0); }
    button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
    button.secondary {
      background: color-mix(in srgb, var(--bg3) 88%, transparent);
      color: var(--text2);
      border: 1px solid var(--border2);
      box-shadow: none;
    }
    button.secondary:hover {
      color: var(--text);
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border2));
      background: color-mix(in srgb, var(--accent) 8%, var(--bg3));
    }
    button.following {
      color: var(--partner);
      border-color: color-mix(in srgb, var(--partner) 48%, var(--border2));
      background: color-mix(in srgb, var(--partner) 12%, var(--bg3));
    }
    .shell {
      width: min(1480px, 100%);
      margin: 0 auto;
      padding: clamp(12px, 2vw, 22px);
    }
    .feed-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
      align-items: end;
      gap: 16px;
      margin-bottom: 14px;
    }
    .brand-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 28px;
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
      border-radius: 999px;
      padding: 5px 10px;
      color: var(--accent);
      background: var(--accent-soft);
      font-size: .76rem;
      font-weight: 850;
      margin-bottom: 8px;
    }
    .brand h1 {
      font-size: clamp(1.42rem, 2.2vw, 2.15rem);
      line-height: 1.05;
      letter-spacing: -.035em;
    }
    .brand p {
      color: var(--text2);
      font-size: .9rem;
      margin-top: 6px;
      line-height: 1.4;
    }
    .hero-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
    .feed-search-wrap {
      position: relative;
      min-width: min(100%, 330px);
      flex: 1 1 260px;
    }
    .feed-search-wrap::before {
      content: "⌕";
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      font-weight: 900;
      pointer-events: none;
    }
    .feed-search {
      width: 100%;
      min-height: 42px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--bg2) 86%, transparent);
      color: var(--text);
      padding: 10px 42px 10px 34px;
      box-shadow: var(--shadow-soft);
      outline: none;
    }
    .feed-search:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--border2)); }
    .quick-nav {
      display: none;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 4px 0 12px;
    }
    .feed-view-switcher {
      scroll-snap-type: x proximity;
      scroll-padding-inline: 10px;
    }
    .quick-nav::-webkit-scrollbar { display: none; }
    .quick-nav-form {
      display: contents;
      margin: 0;
    }
    .quick-nav a, .quick-nav button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-height: 36px;
      border-radius: 999px;
      border: 1px solid var(--border);
      color: var(--text2);
      background: color-mix(in srgb, var(--bg2) 90%, transparent);
      padding: 8px 13px;
      font-size: .78rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .quick-nav a.active, .quick-nav button.active {
      color: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
      background: var(--accent-soft);
    }
    .feed-app {
      display: grid;
      grid-template-columns: minmax(215px, 260px) minmax(420px, 760px) minmax(260px, 360px);
      gap: 18px;
      align-items: start;
    }
    .rail, .main { min-width: 0; }
    .rail { display: grid; gap: 14px; position: sticky; top: 76px; }
    /* Same implicit-track trap as the post card: on a 1fr mobile column the
       .main grid's auto track lets the post list size to max-content and
       spill right. minmax(0, 1fr) caps it at the column width. */
    .main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .main > * { min-width: 0; }
    .right-rail > .panel {
      overflow: clip;
      border-radius: var(--radius);
      background-clip: padding-box;
      isolation: isolate;
    }
    /* step121-feed-nested-corner-safety:
       After the obvious full-bleed/header-link artifacts are fixed, the
       remaining visual collisions come from nested rounded surfaces that sit
       tightly inside rounded panels. Give those inner boxes a tiny explicit
       inset so their own border/fill does not visually flatten into the outer
       card corners. */
    .feed-view-list,
    .suggest-list {
      padding: 2px;
    }
    .suggest-list > .empty,
    .contacts-list > .empty {
      border-radius: 15px;
      overflow: hidden;
      background-clip: padding-box;
      padding: 16px 18px;
    }
    .mini-graph-stage {
      margin-inline: 2px;
      background-clip: padding-box;
    }
    .mini-graph-counts {
      padding-inline: 2px;
    }
    body.profile-page .feed-app {
      grid-template-columns: minmax(230px, 280px) minmax(420px, 760px);
      justify-content: center;
    }
    body.profile-page .main { width: auto; }
    body.profile-page .quick-nav { display: none; }
    body.profile-page .profile-left-rail { align-self: start; }
    body.profile-page .profile-left-rail .contacts-list {
      display: grid;
      max-height: 330px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 0;
    }
    body.profile-page .profile-left-rail .contact-row { min-width: 0; }
    .panel,
    .composer,
    .post,
    .empty {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--glow), var(--card);
      background-clip: padding-box;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .panel {
      padding: 14px;
      overflow: clip;
      background-clip: padding-box;
      isolation: isolate;
    }
    [hidden] { display: none !important; }
    .panel-head,
    .feed-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .panel-title, .feed-head strong {
      display: block;
      font-size: .96rem;
      font-weight: 880;
      letter-spacing: -.01em;
    }
    .panel-subtitle, .feed-head span {
      display: block;
      color: var(--text2);
      font-size: .78rem;
      line-height: 1.35;
      margin-top: 3px;
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .count-pill,
    .post-count-pill,
    .topic-count {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      min-height: 24px;
      border-radius: 999px;
      padding: 3px 8px;
      color: var(--text2);
      background: color-mix(in srgb, var(--bg3) 76%, transparent);
      border: 1px solid var(--border);
      font-size: .8rem;
      font-weight: 850;
    }
    .remote-follow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin-bottom: 10px;
    }
    .remote-follow input,
    .timeline-select,
    textarea,
    input,
    select {
      width: 100%;
      border: 1px solid var(--border2);
      background: color-mix(in srgb, var(--bg3) 78%, transparent);
      color: var(--text);
      border-radius: 13px;
      padding: 10px 12px;
      outline: none;
      font-size: .9rem;
    }
    textarea:focus, input:focus, select:focus { border-color: color-mix(in srgb, var(--accent) 58%, var(--border2)); }

    /* Shared pressed-in glass effect for selected/tapped feed controls.
       It mirrors the composer tool buttons without hard-coding a theme color,
       so trans pride, blue bird, dark, and light themes keep their accent. */
    :root {
      --pressed-control-bg: color-mix(in srgb, var(--accent) 12%, var(--bg3));
      --pressed-control-bg-top: color-mix(in srgb, var(--accent) 14%, var(--card));
      --pressed-control-border: color-mix(in srgb, var(--accent) 50%, var(--border2));
      --pressed-control-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -10px 18px color-mix(in srgb, var(--accent) 10%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
        0 8px 20px color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,.14));
      --pressed-control-shadow-down:
        inset 0 2px 7px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.28),
        0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
        0 3px 10px color-mix(in srgb, var(--accent) 8%, rgba(0,0,0,.12));
    }
    .feed-view-panel {
      display: grid;
      gap: 0;
      padding: 0;
      overflow: clip;
      border-radius: var(--radius);
    }
    .feed-view-panel-body { min-width: 0; }
    .feed-view-list {
      display: grid;
      gap: 8px;
      padding: 1px;
      overflow: visible;
    }
    .feed-view-link {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 10px 11px;
      border-radius: 15px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg3) 55%, transparent);
      background-clip: padding-box;
      overflow: hidden;
      color: var(--text2);
      font-size: .86rem;
      font-weight: 820;
      text-decoration: none;
      transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s, filter .15s;
    }
    .feed-view-link:hover {
      color: var(--text);
      text-decoration: none;
      background: var(--row-hover);
      border-color: color-mix(in srgb, var(--accent) 34%, var(--border2));
      transform: translateY(-1px);
    }
    .feed-view-link.active,
    .feed-view-link[aria-current="page"] {
      color: var(--accent);
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, var(--pressed-control-bg-top), var(--pressed-control-bg)),
        var(--accent-soft);
      box-shadow: var(--pressed-control-shadow);
    }
    .feed-view-link:active {
      color: var(--accent);
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, var(--pressed-control-bg), color-mix(in srgb, var(--accent) 8%, var(--bg3))),
        var(--accent-soft);
      box-shadow: var(--pressed-control-shadow-down);
      transform: translateY(1px);
    }
    .feed-view-link.active .feed-view-icon,
    .feed-view-link[aria-current="page"] .feed-view-icon,
    .feed-view-link:active .feed-view-icon {
      background:
        linear-gradient(180deg, var(--pressed-control-bg-top), var(--pressed-control-bg));
      border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border2));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -6px 12px color-mix(in srgb, var(--accent) 10%, transparent);
    }
    .feed-view-icon {
      width: 28px;
      height: 28px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
      color: currentColor;
      font-size: .9rem;
      font-weight: 900;
    }
    .feed-view-meta { min-width: 0; }
    .feed-view-meta strong { display: block; font-size: .86rem; line-height: 1.15; }
    .feed-view-meta span { display: block; margin-top: 2px; color: var(--text3); font-size: .7rem; line-height: 1.2; }
    .feed-view-arrow { color: var(--text3); font-size: .82rem; }
    .contacts-list { display: grid; gap: 8px; max-height: calc(100vh - 235px); overflow: auto; padding-right: 2px; }
    .feed-following-panel { padding: 0; overflow: hidden; }
    .feed-following-panel .following-panel-toggle,
    .feed-view-panel .following-panel-toggle {
      width: 100%;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border: 0;
      border-radius: inherit;
      background: transparent !important;
      color: var(--text);
      box-shadow: none !important;
      text-align: left;
    }
    .feed-following-panel .following-panel-toggle:hover,
    .feed-following-panel .following-panel-toggle:focus-visible,
    .feed-view-panel .following-panel-toggle:hover,
    .feed-view-panel .following-panel-toggle:focus-visible {
      background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
      color: var(--text);
      transform: none;
      text-decoration: none;
    }
    .feed-following-panel .following-panel-toggle:focus-visible,
    .feed-view-panel .following-panel-toggle:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
      outline-offset: -3px;
    }
    .following-toggle-copy { min-width: 0; }
    .following-toggle-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .following-chevron {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      color: var(--accent);
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg3) 72%, transparent);
      font-size: .86rem;
      font-weight: 900;
      transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
    }
    .following-panel-toggle:active .following-chevron,
    .following-panel-toggle[aria-expanded="true"] .following-chevron,
    .feed-following-panel.expanded .following-chevron {
      color: var(--accent);
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, var(--pressed-control-bg-top), var(--pressed-control-bg));
      box-shadow: var(--pressed-control-shadow);
    }
    .following-panel-toggle:active .following-chevron {
      transform: translateY(1px);
      box-shadow: var(--pressed-control-shadow-down);
    }
    .following-panel-toggle[aria-expanded="true"] .following-chevron,
    .feed-following-panel.expanded .following-chevron { transform: rotate(180deg); }
    .following-panel-toggle[aria-expanded="true"]:active .following-chevron,
    .feed-following-panel.expanded .following-panel-toggle:active .following-chevron { transform: rotate(180deg) translateY(-1px); }
    .following-panel-body { display: grid; gap: 10px; padding: 0 14px 14px; }
    .following-panel-body[hidden] { display: none; }
    .contact-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 58px;
      padding: 9px;
      position: relative;
      border: 1px solid transparent;
      border-radius: 16px;
      background: color-mix(in srgb, var(--bg3) 55%, transparent);
      transition: background .15s, border-color .15s, transform .15s;
    }
    .contact-row:hover { background: var(--row-hover); transform: translateY(-1px); }
    .contact-row.rel-partner { border-color: color-mix(in srgb, var(--partner) 42%, transparent); }
    .contact-row.rel-metamour { border-color: color-mix(in srgb, var(--metamour) 40%, transparent); }
    .contact-row.rel-ex { border-color: color-mix(in srgb, var(--ex) 40%, transparent); }
    .rel-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 14px currentColor; }
    .rel-dot.partner { background: var(--partner); color: var(--partner); }
    .rel-dot.metamour { background: var(--metamour); color: var(--metamour); }
    .rel-dot.ex { background: var(--ex); color: var(--ex); }
    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
      color: var(--text);
      border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border2));
      font-size: .82rem;
      font-weight: 850;
      flex: 0 0 auto;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .contact-main, .post-main { min-width: 0; }
    /* The identity row owns the full header width left by the avatar. This
       keeps its source and delivery pills on the username side of the kebab
       at every viewport width. */
    .post-author .post-main { flex: 1 1 0%; }
    .post-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 7px; row-gap: 3px; }
    .post-author .post-identity { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 3px 7px; flex-wrap: wrap; min-width: 0; }
    .contact-main strong, .post-author strong { display: block; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.2; }
    .contact-main span, .post-author span { display: block; color: var(--text2); font-size: .74rem; margin-top: 3px; }
    .post-author .post-main strong { display: inline-flex; align-items: center; margin: 0; }
    .post-author .post-main span { margin-top: 0; }
    .post-author .post-main .remote-source-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      /* New posts are reconciled from the compact card partial before the
         header measurer runs. Keep each badge intrinsically sized in that
         grid fallback instead of stretching the Fediverse pill across its
         whole column. */
      flex: 0 0 auto;
      inline-size: fit-content;
      max-inline-size: 100%;
      justify-self: start;
      color: var(--text2);
      font-size: .68rem;
      font-weight: 800;
      line-height: 1.6;
      white-space: nowrap;
    }
    .post-author .post-identity .remote-source-badge-icon.post-header-icon-hidden { display: none; }
    .post-author .post-main .post-meta {
      display: block;
      grid-column: 1;
      grid-row: 2;
      min-width: 0;
      /* The adjacent action control keeps its full touch target. Anchor the
         timestamp to the start of this grid row so that target cannot center
         the date lower than the identity pills on desktop or native WebViews. */
      align-self: start;
      margin-top: 0;
      white-space: nowrap;
    }
    /* Show more and the kebab share a compact lower-right slot. The identity
       row above remains free to pack source and delivery pills from left to
       right, including the smaller-pill fallback selected by the script. */
    .post-author .post-main > .post-actions { grid-column: 2; grid-row: 2; margin-inline-start: 0; justify-self: end; align-self: center; }
    /* When the width-aware header packer proves the complete identity and
       compact-control set fits, keep it together in the top row. Otherwise
       the default two-row grid remains intact, so no pill crosses the kebab. */
    .post-main.post-header-actions-inline .post-identity { grid-column: 1; grid-row: 1; flex-wrap: nowrap; }
    .post-main.post-header-actions-inline .post-identity > strong { white-space: nowrap; }
    /* The action hit target is deliberately larger than the visible three
       dots. Let it overflow the identity row rather than inflating that row
       and pushing the timestamp away from the source/delivery pills. */
    .post-main.post-header-actions-inline > .post-actions { grid-column: 2; grid-row: 1; align-self: center; height: 0; min-height: 0; overflow: visible; }
    .post-main.post-header-actions-inline > .post-actions .post-actions-menu { top: calc(50% + 25px); }
    .post-main.post-header-actions-inline .post-meta { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
    .post-actions.post-actions-compact-toggle > .post-top-toggle-btn { padding-inline: 7px; font-size: .72rem; }
    html[data-theme-preference] body.pc-feed-shell .post .post-actions.post-actions-compact-toggle > button.post-top-toggle-btn,
    body.pc-feed-shell .post .post-actions.post-actions-compact-toggle > button.post-top-toggle-btn { padding-inline: 7px !important; font-size: .72rem !important; }
    /* Measured header rows keep badges left aligned and controls right aligned.
       The menu stays inside its original positioned action wrapper. */
    .post-author .post-main.post-header-packed { position: relative; }
    .post-author .post-main.post-header-packed > .post-identity { display: block; position: relative; grid-column: 1 / -1; }
    .post-author .post-main.post-header-packed > .post-identity > * { position: absolute; margin: 0; white-space: nowrap; }
    .post-author .post-main.post-header-packed > .post-actions { position: absolute; grid-area: auto; right: 0; top: var(--post-header-action-top); height: auto; }
    .post-author .post-main.post-header-packed > .post-meta { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
    .post-author .post-main.post-header-one-row > .post-meta { max-width: calc(100% - var(--post-header-kebab-width) - 7px); }
    html[data-theme-preference] body.pc-feed-shell .post .post-header-packed > .post-actions > button.post-top-toggle-btn,
    html body.pc-feed-shell .post .post-header-packed > .post-actions > button.post-top-toggle-btn { margin-inline-end: 0 !important; max-width: none !important; }
    html[data-theme-preference] body.pc-feed-shell .post .post-header-actions-split > .post-actions > button.post-top-toggle-btn,
    html body.pc-feed-shell .post .post-header-actions-split > .post-actions > button.post-top-toggle-btn { position: absolute !important; right: 0; top: var(--post-header-toggle-top) !important; }
    /* Extremely long names or accessibility text sizes can require a separate
       action row. Never draw metadata underneath the controls in that case. */
    .post-author .post-main:not(.post-header-packed):not(.post-header-actions-inline) > .post-meta { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
    .post-author .post-main:not(.post-header-packed):not(.post-header-actions-inline) > .post-actions { grid-row: 3; }
    .post-author .post-main:not(.post-header-packed) .remote-source-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .contact-row button { min-height: 34px; padding: 7px 10px; border-radius: 12px; }
    .find-follow-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 10px;
      padding: 8px 12px;
      min-height: 38px;
      border: 1px solid transparent !important;
      border-radius: 14px !important;
      background: transparent !important;
      background-image: none !important;
      box-shadow: none !important;
      color: var(--accent);
      font-weight: 880;
      text-decoration: none;
      transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
    }
    .find-follow-btn:hover,
    .find-follow-btn:focus-visible {
      color: var(--accent);
      border-color: var(--pressed-control-border) !important;
      background:
        linear-gradient(180deg, var(--pressed-control-bg-top), var(--pressed-control-bg)) !important;
      box-shadow: var(--pressed-control-shadow) !important;
      text-decoration: none;
    }
    .find-follow-btn:active {
      color: var(--accent);
      border-color: var(--pressed-control-border) !important;
      background:
        linear-gradient(180deg, var(--pressed-control-bg), color-mix(in srgb, var(--accent) 8%, var(--bg3))) !important;
      box-shadow: var(--pressed-control-shadow-down) !important;
      transform: translateY(1px);
      text-decoration: none;
    }
    .feed-head {
      margin: 0;
      padding: 15px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--accent-soft), transparent 45%), color-mix(in srgb, var(--card) 95%, transparent);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }
    .feed-head-main { min-width: 0; }
    .feed-head-actions { display: flex; align-items: center; gap: 9px; min-width: min(100%, 260px); }
    .timeline-select {
      min-height: 38px;
      padding: 8px 11px;
      background-clip: padding-box;
      overflow: hidden;
    }
    .profile-summary-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      padding: 16px;
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--partner) 12%, transparent), transparent 48%),
        color-mix(in srgb, var(--card) 95%, transparent);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }
    .profile-summary-card[hidden] { display: none !important; }
    .profile-summary-avatar { width: 58px; height: 58px; font-size: 1rem; }
    .profile-summary-main { min-width: 0; display: grid; gap: 7px; }
    .profile-summary-main > strong { display: block; font-size: 1.18rem; line-height: 1.15; overflow-wrap: anywhere; }
    .profile-summary-main > span { color: var(--text2); font-size: .82rem; line-height: 1.35; }
    .profile-summary-main p { color: var(--text2); font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
    .profile-summary-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
    .bluesky-profile-manager {
      display: grid;
      gap: 12px;
      padding: 18px;
      border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, color-mix(in srgb, #4aa3ff 13%, transparent), transparent 48%),
        color-mix(in srgb, var(--card) 96%, transparent);
      box-shadow: var(--shadow-soft);
    }
    .bluesky-profile-manager-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 16px;
    }
    .bluesky-profile-manager-head h2 { margin: 0; font-size: 1.16rem; line-height: 1.2; }
    .bluesky-profile-manager-kicker {
      margin: 0 0 3px;
      color: color-mix(in srgb, #63b7ff 72%, var(--accent));
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .03em;
    }
    .bluesky-profile-manager-copy,
    .bluesky-profile-manager-connection,
    .bluesky-profile-manager-status {
      margin: 0;
      color: var(--text2);
      font-size: .84rem;
      line-height: 1.45;
    }
    .bluesky-profile-manager-connection { margin-top: 5px; font-weight: 700; }
    .bluesky-profile-manager-connection.ok { color: var(--green); }
    .bluesky-profile-manager-connection.error { color: var(--red); }
    .bluesky-profile-manager-copy { margin-top: 2px; }
    .bluesky-profile-manager-status.error { color: var(--red); }
    .bluesky-profile-manager-status.ok { color: var(--green); }
    .bluesky-profile-manager-refresh { white-space: nowrap; }
    .bluesky-profile-manager-workspace {
      display: grid;
      grid-template-columns: minmax(230px, .9fr) minmax(300px, 1.1fr);
      min-height: 390px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: color-mix(in srgb, var(--bg3) 62%, var(--card));
    }
    .bluesky-profile-manager-browser {
      display: grid;
      align-content: start;
      gap: 10px;
      min-width: 0;
      padding: 12px;
      border-right: 1px solid var(--border);
    }
    .bluesky-profile-manager-search {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 11px;
      border: 1px solid var(--border2);
      border-radius: 11px;
      color: var(--text2);
      background: color-mix(in srgb, var(--bg2) 82%, var(--card));
    }
    .bluesky-profile-manager-search:focus-within { border-color: color-mix(in srgb, #4aa3ff 70%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, #4aa3ff 16%, transparent); }
    .bluesky-profile-manager-search input {
      min-width: 0;
      border: 0;
      outline: 0;
      color: var(--text);
      background: transparent;
      font: inherit;
    }
    .bluesky-profile-manager-search input::placeholder { color: var(--text2); opacity: .8; }
    .bluesky-profile-manager-filters {
      display: flex;
      gap: 5px;
      overflow-x: auto;
      padding-bottom: 1px;
      scrollbar-width: thin;
    }
    .bluesky-profile-manager-filter {
      flex: 0 0 auto;
      min-height: 33px;
      padding: 6px 9px;
      border: 1px solid transparent;
      border-radius: 9px;
      color: var(--text2);
      background: transparent;
      font: inherit;
      font-size: .76rem;
      font-weight: 750;
      cursor: pointer;
    }
    .bluesky-profile-manager-filter span {
      display: inline-grid;
      place-items: center;
      min-width: 18px;
      margin-left: 2px;
      padding: 0 4px;
      border-radius: 999px;
      color: inherit;
      background: color-mix(in srgb, var(--text2) 12%, transparent);
      font-size: .69rem;
    }
    .bluesky-profile-manager-filter:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
    .bluesky-profile-manager-filter.is-active {
      border-color: color-mix(in srgb, #4aa3ff 48%, var(--border));
      color: color-mix(in srgb, #a9d9ff 88%, var(--text));
      background: color-mix(in srgb, #4aa3ff 18%, transparent);
    }
    .bluesky-profile-manager-list { display: grid; gap: 4px; }
    .bluesky-profile-manager-item {
      min-width: 0;
      overflow: hidden;
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
    }
    .bluesky-profile-manager-item:hover { border-color: var(--border); background: color-mix(in srgb, var(--bg2) 58%, transparent); }
    .bluesky-profile-manager-item.is-selected {
      border-color: color-mix(in srgb, #4aa3ff 74%, var(--border));
      background: color-mix(in srgb, #4aa3ff 12%, var(--bg2));
      box-shadow: inset 3px 0 0 #4aa3ff;
    }
    .bluesky-profile-manager-row {
      display: grid;
      grid-template-columns: auto 24px minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 9px;
      width: 100%;
      min-height: 68px;
      padding: 9px;
      border: 0;
      color: inherit;
      background: transparent;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    .bluesky-profile-manager-row:focus-visible,
    .bluesky-profile-manager-filter:focus-visible,
    .bluesky-profile-manager-overflow summary:focus-visible { outline: 2px solid #4aa3ff; outline-offset: -2px; }
    .bluesky-profile-manager-row-icon {
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      border: 1px solid color-mix(in srgb, #4aa3ff 32%, var(--border));
      border-radius: 50%;
      background: color-mix(in srgb, #4aa3ff 11%, var(--bg2));
      font-size: .86rem;
    }
    .bluesky-profile-manager-row-thread {
      position: relative;
      align-self: stretch;
      display: grid;
      place-items: center;
      min-width: 24px;
      color: color-mix(in srgb, var(--text2) 58%, transparent);
    }
    .bluesky-profile-manager-row-thread::before {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: color-mix(in srgb, var(--text2) 18%, transparent);
    }
    .bluesky-profile-manager-row-thread-marker {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 21px;
      height: 21px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--bg2) 76%, var(--card));
      font-size: .84rem;
      font-weight: 900;
      line-height: 1;
    }
    .bluesky-profile-manager-row-thread:not(.is-reply)::before {
      top: 50%;
      bottom: auto;
      width: 4px;
      height: 4px;
      transform: translate(-50%, -50%);
    }
    .bluesky-profile-manager-row-thread:not(.is-reply) .bluesky-profile-manager-row-thread-marker {
      width: 12px;
      height: 12px;
      color: transparent;
      background: color-mix(in srgb, var(--text2) 24%, transparent);
    }
    .bluesky-profile-manager-row-thread.is-reply { color: #62adff; }
    .bluesky-profile-manager-row-thread.is-reply::before {
      background: color-mix(in srgb, #4aa3ff 78%, var(--border));
      box-shadow: 0 0 10px rgb(74 163 255 / .22);
    }
    .bluesky-profile-manager-row-thread.is-reply .bluesky-profile-manager-row-thread-marker {
      border: 1px solid color-mix(in srgb, #4aa3ff 46%, var(--border));
      background: color-mix(in srgb, #4aa3ff 15%, var(--bg2));
    }
    .bluesky-profile-manager-row-copy { display: grid; min-width: 0; gap: 5px; }
    .bluesky-profile-manager-row-copy > strong {
      overflow: hidden;
      color: var(--text);
      font-size: .84rem;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .bluesky-profile-manager-row-meta {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      overflow: hidden;
      color: var(--text2);
      font-size: .68rem;
      white-space: nowrap;
    }
    .bluesky-profile-manager-row-meta time { overflow: hidden; text-overflow: ellipsis; }
    .bluesky-profile-manager-row-media {
      display: flex;
      flex: 0 0 auto;
      gap: 5px;
      align-items: center;
    }
    .bluesky-profile-manager-row-media img,
    .bluesky-profile-manager-row-media-more {
      display: block;
      width: 42px;
      height: 42px;
      border: 1px solid color-mix(in srgb, #a9d9ff 30%, var(--border));
      border-radius: 9px;
      background: color-mix(in srgb, var(--bg2) 76%, transparent);
      object-fit: cover;
    }
    .bluesky-profile-manager-row-media-more {
      display: grid;
      place-items: center;
      width: auto;
      min-width: 30px;
      padding: 0 7px;
      color: var(--text2);
      font-size: .64rem;
      font-weight: 800;
    }
    .bluesky-profile-manager-row-affordance { color: var(--text2); font-size: 1.2rem; line-height: 1; }
    .bluesky-profile-manager-badge {
      flex: 0 0 auto;
      padding: 3px 6px;
      border: 1px solid var(--border2);
      border-radius: 999px;
      color: var(--text2);
      font-size: .66rem;
      font-weight: 750;
    }
    .bluesky-profile-manager-badge.managed {
      color: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
      background: color-mix(in srgb, var(--accent) 9%, transparent);
    }
    .bluesky-profile-manager-chip {
      flex: 0 0 auto;
      padding: 3px 6px;
      border-radius: 999px;
      color: var(--text2);
      background: color-mix(in srgb, var(--text2) 9%, transparent);
      font-weight: 700;
    }
    .bluesky-profile-manager-chip.reply {
      color: color-mix(in srgb, #7abaff 82%, var(--text));
      background: color-mix(in srgb, #4aa3ff 12%, transparent);
    }
    .bluesky-profile-manager-browser-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 7px;
      border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      color: var(--text2);
      font-size: .73rem;
    }
    .bluesky-profile-manager-more { justify-self: end; }
    .bluesky-profile-manager-empty {
      margin: 24px 8px;
      color: var(--text2);
      font-size: .84rem;
      text-align: center;
    }
    .bluesky-profile-manager-detail {
      display: grid;
      align-content: start;
      gap: 12px;
      min-width: 0;
      padding: 17px;
      background:
        linear-gradient(180deg, color-mix(in srgb, #4aa3ff 6%, transparent), transparent 45%),
        color-mix(in srgb, var(--card) 60%, transparent);
    }
    .bluesky-profile-manager-detail-empty {
      align-self: center;
      max-width: 290px;
      margin: auto;
      color: var(--text2);
      text-align: center;
    }
    .bluesky-profile-manager-detail-empty h3 { margin: 0 0 6px; color: var(--text); font-size: 1rem; }
    .bluesky-profile-manager-detail-empty p { margin: 0; font-size: .86rem; line-height: 1.45; }
    .bluesky-profile-manager-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      row-gap: 6px;
    }
    .bluesky-profile-manager-detail-head h3 { margin: 0; color: var(--text); font-size: 1rem; }
    .bluesky-profile-manager-detail-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex-wrap: wrap; }
    .bluesky-profile-manager-detail-close { display: none; }
    .bluesky-profile-manager-detail-meta { margin: 0; color: var(--text2); font-size: .76rem; }
    .bluesky-profile-manager-editor { display: grid; gap: 7px; }
    .bluesky-profile-manager-editor label { display: grid; gap: 6px; color: var(--text); font-size: .82rem; font-weight: 750; }
    .bluesky-profile-manager-editor textarea {
      width: 100%;
      min-height: 126px;
      resize: vertical;
      padding: 10px 11px;
      border: 1px solid var(--border2);
      border-radius: 11px;
      background: var(--bg2);
      color: var(--text);
      font: inherit;
      line-height: 1.4;
    }
    .bluesky-profile-manager-editor textarea:focus { outline: 2px solid color-mix(in srgb, #4aa3ff 68%, transparent); outline-offset: 1px; }
    .bluesky-profile-manager-character-count { justify-self: end; margin-top: -3px; color: var(--text2); font-size: .72rem; }
    .bluesky-profile-manager-note { margin: 0; color: var(--text2); font-size: .74rem; line-height: 1.4; }
    .bluesky-profile-manager-preview { display: grid; gap: 6px; }
    .bluesky-profile-manager-preview h3 { margin: 0; color: var(--text2); font-size: .77rem; font-weight: 750; }
    .bluesky-profile-manager-preview-card {
      display: grid;
      gap: 7px;
      padding: 11px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--bg2) 72%, var(--card));
    }
    .bluesky-profile-manager-preview-card strong { color: var(--text2); font-size: .75rem; }
    .bluesky-profile-manager-preview-card p { margin: 0; color: var(--text); font-size: .86rem; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
    .bluesky-profile-manager-preview-media {
      display: inline-flex;
      justify-self: start;
      padding: 5px 7px;
      border: 1px dashed var(--border2);
      border-radius: 8px;
      color: var(--text2);
      font-size: .72rem;
      font-weight: 700;
    }
    .bluesky-profile-manager-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .bluesky-profile-manager-detail-actions > a { min-height: 38px; display: inline-flex; align-items: center; }
    .bluesky-profile-manager-local-notice {
      display: grid;
      gap: 4px;
      padding: 10px 11px;
      border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
      border-radius: 11px;
      background: color-mix(in srgb, var(--accent) 8%, transparent);
    }
    .bluesky-profile-manager-local-notice strong { color: var(--text); font-size: .82rem; }
    .bluesky-profile-manager-local-notice p { margin: 0; color: var(--text2); font-size: .78rem; line-height: 1.42; }
    .bluesky-profile-manager-reply-context {
      display: grid;
      gap: 7px;
      padding: 10px 11px;
      border: 1px solid color-mix(in srgb, #4aa3ff 34%, var(--border));
      border-radius: 11px;
      background: color-mix(in srgb, #4aa3ff 7%, transparent);
    }
    .bluesky-profile-manager-reply-context h4 { margin: 0; color: var(--text); font-size: .82rem; }
    .bluesky-profile-manager-reply-context h4::before { content: "↪"; margin-right: 6px; color: #62adff; }
    .bluesky-profile-manager-reply-context p { margin: 0; color: var(--text2); font-size: .76rem; line-height: 1.42; }
    .bluesky-profile-manager-reply-actions { display: flex; flex-wrap: wrap; gap: 7px; }
    .bluesky-profile-manager-reply-actions a { min-height: 34px; display: inline-flex; align-items: center; font-size: .75rem; }
    .bluesky-profile-manager-reply-unavailable { color: var(--text2); font-size: .73rem; }
    .bluesky-profile-manager-overflow { justify-self: start; color: var(--text2); font-size: .78rem; }
    .bluesky-profile-manager-overflow summary { padding: 5px 0; cursor: pointer; }
    .bluesky-profile-manager-overflow button { margin-top: 5px; }
    .bluesky-profile-manager-danger { color: var(--red); }
    .bluesky-profile-manager-help { color: var(--text2); font-size: .78rem; line-height: 1.45; }
    .bluesky-profile-manager-help summary { color: var(--text); font-weight: 750; cursor: pointer; }
    .bluesky-profile-manager-help p { margin: 7px 0 0; max-width: 72ch; }
    @media (max-width: 760px) {
      .bluesky-profile-manager { padding: 14px; }
      .bluesky-profile-manager-head { align-items: flex-start; }
      .bluesky-profile-manager-refresh span { display: none; }
      .bluesky-profile-manager-refresh { min-width: 40px; padding-inline: 10px; }
      .bluesky-profile-manager-workspace { grid-template-columns: 1fr; min-height: 0; }
      .bluesky-profile-manager-browser { border-right: 0; border-bottom: 1px solid var(--border); }
      .bluesky-profile-manager-detail { padding: 14px; }
      .bluesky-profile-manager-row-copy > strong { white-space: normal; }
    }
    body.bluesky-studio-open { overflow: hidden; }
    .profile-bluesky-edit-trigger { white-space: nowrap; }
    .bluesky-studio-modal {
      position: fixed;
      z-index: 16010;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      overflow: auto;
      background: rgb(7 9 19 / .76);
      backdrop-filter: blur(12px) saturate(1.08);
      -webkit-backdrop-filter: blur(12px) saturate(1.08);
    }
    .bluesky-studio-modal[hidden] { display: none !important; }
    .bluesky-studio-dialog {
      --studio-purple: #ad84ee;
      --studio-purple-strong: #9c71e4;
      --studio-purple-soft: #c6a1ff;
      width: min(1160px, calc(100vw - 48px));
      max-height: min(790px, calc(100dvh - 48px));
      box-sizing: border-box;
      padding: clamp(18px, 2.5vw, 28px);
      overflow: auto;
      border-color: color-mix(in srgb, var(--studio-purple) 54%, var(--border));
      border-radius: 24px;
      background:
        radial-gradient(circle at 14% 0%, rgb(172 132 238 / .2), transparent 31rem),
        linear-gradient(155deg, rgb(67 75 106 / .98), rgb(38 42 62 / .99) 68%);
      box-shadow: 0 28px 90px rgb(0 0 0 / .54), inset 0 1px 0 rgb(255 255 255 / .08);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-head { align-items: flex-start; }
    .bluesky-studio-dialog .bluesky-profile-manager-head h2 { font-size: clamp(1.28rem, 2vw, 1.58rem); }
    .bluesky-studio-dialog .bluesky-profile-manager-kicker { color: var(--studio-purple-soft); }
    .bluesky-studio-dialog-actions { display: flex; align-items: center; gap: 10px; }
    .bluesky-studio-dialog .bluesky-profile-manager-refresh {
      min-height: 46px;
      border-color: color-mix(in srgb, var(--studio-purple) 62%, var(--border));
      color: #f7f1ff;
      background: color-mix(in srgb, var(--studio-purple) 19%, transparent);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-refresh:hover {
      border-color: var(--studio-purple-soft);
      background: color-mix(in srgb, var(--studio-purple) 31%, transparent);
    }
    .bluesky-studio-close {
      display: inline-grid;
      place-items: center;
      width: 48px;
      min-width: 48px;
      height: 48px;
      padding: 0 0 3px;
      border: 0;
      border-radius: 16px;
      color: white;
      background: var(--studio-purple);
      box-shadow: 0 8px 20px rgb(59 34 100 / .32), inset 0 1px 0 rgb(255 255 255 / .24);
      font-family: inherit;
      font-size: 2rem;
      font-weight: 850;
      line-height: 1;
      cursor: pointer;
    }
    .bluesky-studio-close:hover { background: var(--studio-purple-strong); transform: translateY(-1px); }
    .bluesky-studio-close:focus-visible { outline: 3px solid white; outline-offset: 3px; }
    .bluesky-studio-dialog .bluesky-profile-manager-status { min-height: 1.45em; }
    .bluesky-studio-dialog .bluesky-profile-manager-workspace {
      grid-template-columns: minmax(310px, .82fr) minmax(430px, 1.18fr);
      min-height: 500px;
      border-color: color-mix(in srgb, var(--studio-purple) 28%, var(--border));
      border-radius: 18px;
      background: rgb(36 41 61 / .72);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-browser {
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      align-content: stretch;
      max-height: 530px;
      padding: 14px;
      border-color: color-mix(in srgb, var(--studio-purple) 23%, var(--border));
      background: rgb(47 53 78 / .56);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-search {
      min-height: 44px;
      border-color: color-mix(in srgb, var(--studio-purple) 30%, var(--border));
      border-radius: 12px;
      background: rgb(45 48 69 / .86);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-search:focus-within {
      border-color: var(--studio-purple-soft);
      box-shadow: 0 0 0 3px rgb(173 132 238 / .24);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-filter.is-active {
      border-color: var(--studio-purple-soft);
      color: #221633;
      background: var(--studio-purple);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-list {
      min-height: 0;
      overflow: auto;
      align-content: start;
      padding-right: 2px;
      scrollbar-color: color-mix(in srgb, var(--studio-purple) 68%, transparent) transparent;
    }
    .bluesky-studio-dialog .bluesky-profile-manager-item.is-selected {
      border-color: color-mix(in srgb, var(--studio-purple-soft) 86%, var(--border));
      background: linear-gradient(135deg, var(--studio-purple), #a578e5);
      box-shadow: inset 3px 0 0 #e5d5ff;
    }
    .bluesky-studio-dialog .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-copy > strong,
    .bluesky-studio-dialog .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-meta,
    .bluesky-studio-dialog .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-affordance { color: #25193a; }
    .bluesky-studio-dialog .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-badge,
    .bluesky-studio-dialog .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-chip {
      border-color: rgb(38 23 61 / .22);
      color: #3b2458;
      background: rgb(255 255 255 / .18);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-row-icon {
      border-color: color-mix(in srgb, var(--studio-purple) 55%, var(--border));
      background: color-mix(in srgb, var(--studio-purple) 18%, var(--bg2));
    }
    .bluesky-studio-dialog .bluesky-profile-manager-detail {
      max-height: 530px;
      overflow: auto;
      padding: 22px;
      background:
        linear-gradient(180deg, rgb(173 132 238 / .1), transparent 36%),
        rgb(51 56 80 / .68);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-editor textarea:focus {
      outline-color: var(--studio-purple-soft);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-local-notice {
      border-color: color-mix(in srgb, var(--studio-purple) 45%, var(--border));
      background: color-mix(in srgb, var(--studio-purple) 13%, transparent);
    }
    .bluesky-studio-dialog .bluesky-profile-manager-help { padding-top: 2px; }
    /* The global theme intentionally forces the instance accent on generic
       buttons and articles. Keep that behaviour outside this modal, while the
       Studio retains the purple interaction language from its design. */
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-studio-close {
      border-color: color-mix(in srgb, var(--studio-purple-soft) 82%, var(--border)) !important;
      color: white !important;
      background: var(--studio-purple) !important;
      box-shadow: 0 8px 20px rgb(59 34 100 / .32), inset 0 1px 0 rgb(255 255 255 / .24) !important;
    }
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-profile-manager-refresh,
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-profile-manager-more,
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-profile-manager-detail-actions .secondary {
      border-color: color-mix(in srgb, var(--studio-purple-soft) 58%, var(--border)) !important;
      color: #f7f1ff !important;
      background: color-mix(in srgb, var(--studio-purple) 19%, transparent) !important;
    }
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-profile-manager-filter.is-active,
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-profile-manager-detail-actions > button:not(.bluesky-profile-manager-danger) {
      border-color: var(--studio-purple-soft) !important;
      color: #221633 !important;
      background: var(--studio-purple) !important;
    }
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-profile-manager-item.is-selected {
      border-color: color-mix(in srgb, var(--studio-purple-soft) 86%, var(--border)) !important;
      color: #25193a !important;
      background: linear-gradient(135deg, var(--studio-purple), #a578e5) !important;
      box-shadow: inset 3px 0 0 #e5d5ff !important;
    }
    html[data-theme-preference] .bluesky-studio-dialog .bluesky-profile-manager-row {
      color: inherit !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    @media (max-width: 760px) {
      .bluesky-studio-modal { padding: 10px; place-items: center; }
      .bluesky-studio-dialog {
        width: 100vw;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
      }
      .bluesky-studio-dialog .bluesky-profile-manager-workspace { grid-template-columns: 1fr; }
      .bluesky-studio-dialog .bluesky-profile-manager-browser {
        max-height: min(45dvh, 430px);
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--studio-purple) 23%, var(--border));
      }
      .bluesky-studio-dialog .bluesky-profile-manager-detail { max-height: none; }
    }
    /* Studio is an overlay workspace. Keeping the profile in place beneath
       it means closing the dialog restores the owner to the exact same view. */
    body.bluesky-studio-page-open { overflow: hidden; }
    .bluesky-studio-page {
      --studio-purple: #ae84ef;
      --studio-purple-strong: #9b70e2;
      --studio-purple-soft: #c9a5ff;
      display: grid;
      gap: 14px;
      width: min(1360px, calc(100vw - 48px));
      max-height: min(820px, calc(100dvh - 48px));
      box-sizing: border-box;
      padding: clamp(18px, 2.5vw, 30px);
      overflow: auto;
      border: 1px solid color-mix(in srgb, var(--studio-purple) 54%, var(--border));
      border-radius: 24px;
      background:
        radial-gradient(circle at 13% 0%, rgb(173 132 238 / .22), transparent 31rem),
        linear-gradient(150deg, rgb(54 61 91 / .98), rgb(31 35 52 / .99) 72%);
      box-shadow: 0 28px 90px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .08);
    }
    /* On a desktop the Studio is a focused workspace, not a narrow document.
       Use the available viewport while retaining a visible modal gutter and
       keep long post lists and editors inside their dedicated scroll panes. */
    @media (min-width: 1024px) {
      .bluesky-studio-modal { padding: clamp(12px, 1.5vw, 24px); }
      .bluesky-studio-page {
        width: min(2160px, calc(100vw - clamp(24px, 2.5vw, 48px)));
        height: calc(100dvh - clamp(24px, 2.5vw, 48px));
        max-height: none;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        overflow: hidden;
      }
      .bluesky-studio-page .bluesky-profile-manager-workspace {
        min-height: 0;
        height: 100%;
      }
      .bluesky-studio-page .bluesky-profile-manager-browser,
      .bluesky-studio-page .bluesky-profile-manager-detail {
        min-height: 0;
        max-height: none;
      }
    }
    .bluesky-studio-page:focus { outline: 0; }
    .bluesky-studio-page-header {
      display: grid;
      grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr);
      align-items: center;
      gap: clamp(18px, 3vw, 44px);
    }
    .bluesky-studio-owner {
      display: flex;
      align-items: center;
      gap: 15px;
      min-width: 0;
    }
    .bluesky-studio-owner-avatar { width: 76px; height: 76px; flex: 0 0 auto; font-size: 1.25rem; }
    .bluesky-studio-owner > div:last-child { display: grid; gap: 4px; min-width: 0; }
    .bluesky-studio-owner strong { color: #fff; font-size: 1.45rem; line-height: 1.1; overflow-wrap: anywhere; }
    .bluesky-studio-owner > div > span { color: #b9b8cb; font-size: .86rem; overflow-wrap: anywhere; }
    .bluesky-studio-owner-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .bluesky-studio-owner-counts span {
      border: 1px solid rgb(201 165 255 / .22);
      border-radius: 999px;
      padding: 4px 8px;
      color: #ded8ea;
      background: rgb(18 21 36 / .28);
      font-size: .72rem;
      font-weight: 750;
    }
    .bluesky-studio-page .bluesky-profile-manager-head {
      align-items: center;
      padding-left: clamp(18px, 2.5vw, 40px);
      border-left: 1px solid rgb(201 165 255 / .24);
    }
    .bluesky-studio-page .bluesky-profile-manager-head h2 { color: #fff; font-size: clamp(1.45rem, 2.4vw, 2rem); }
    .bluesky-studio-page .bluesky-profile-manager-kicker { color: var(--studio-purple-soft); }
    .bluesky-studio-page .bluesky-profile-manager-connection { color: #d1cedb; }
    .bluesky-studio-page .bluesky-profile-manager-copy { color: #bbb8c8; }
    .bluesky-studio-page-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
    .bluesky-studio-page .bluesky-profile-manager-refresh,
    .bluesky-studio-page .bluesky-studio-back {
      min-height: 44px;
      border-color: rgb(201 165 255 / .45);
      color: #f7f2ff;
      background: rgb(132 100 191 / .2);
    }
    .bluesky-studio-page .bluesky-profile-manager-refresh:hover,
    .bluesky-studio-page .bluesky-studio-back:hover { border-color: var(--studio-purple-soft); background: rgb(174 132 239 / .3); }
    .bluesky-studio-page .bluesky-profile-manager-status { min-height: 1.45em; color: #d5d2df; }
    .bluesky-studio-page .bluesky-profile-manager-status.ok,
    .bluesky-studio-page .bluesky-profile-manager-connection.ok { color: #43f28b; }
    .bluesky-studio-page .bluesky-profile-manager-workspace {
      grid-template-columns: minmax(320px, .87fr) minmax(470px, 1.13fr);
      min-height: 650px;
      border-color: rgb(201 165 255 / .28);
      border-radius: 18px;
      background: rgb(27 31 49 / .72);
    }
    .bluesky-studio-page .bluesky-profile-manager-browser {
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      align-content: stretch;
      max-height: 700px;
      padding: 15px;
      border-color: rgb(201 165 255 / .22);
      background: rgb(43 49 72 / .62);
    }
    .bluesky-studio-page .bluesky-profile-manager-search {
      min-height: 46px;
      border-color: rgb(201 165 255 / .35);
      border-radius: 12px;
      background: rgb(37 40 60 / .92);
    }
    .bluesky-studio-page .bluesky-profile-manager-search:focus-within { border-color: var(--studio-purple-soft); box-shadow: 0 0 0 3px rgb(174 132 239 / .23); }
    .bluesky-studio-page .bluesky-profile-manager-filter { color: #d6d2df; }
    .bluesky-studio-page .bluesky-profile-manager-filter.is-active {
      border-color: var(--studio-purple-soft);
      color: #271a39;
      background: var(--studio-purple);
    }
    .bluesky-studio-page .bluesky-profile-manager-list {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      /* "Show more" must extend the scrollable list, never divide its fixed
         viewport among extra implicit rows. Keep text and picture thumbnails
         at their designed card height, then scroll the overflow. */
      grid-auto-rows: minmax(68px, max-content);
      overflow-x: hidden;
      overflow-y: auto;
      align-content: start;
      overscroll-behavior: contain;
      padding-right: 2px;
      scrollbar-gutter: stable;
      scrollbar-color: rgb(174 132 239 / .8) transparent;
    }
    .bluesky-studio-page .bluesky-profile-manager-item {
      min-height: 68px;
      border-color: rgb(201 165 255 / .17);
      background: rgb(29 33 51 / .36);
    }
    .bluesky-studio-page .bluesky-profile-manager-item.is-selected {
      border-color: #5da7ff;
      background: linear-gradient(100deg, rgb(42 84 140 / .7), rgb(49 47 85 / .75));
      box-shadow: inset 4px 0 0 #4aa3ff, 0 0 0 1px rgb(74 163 255 / .18);
    }
    .bluesky-studio-page .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-copy > strong,
    .bluesky-studio-page .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-meta,
    .bluesky-studio-page .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-affordance { color: #fff; }
    .bluesky-studio-page .bluesky-profile-manager-row-icon { border-color: rgb(174 132 239 / .4); background: rgb(87 71 133 / .38); }
    .bluesky-studio-page .bluesky-profile-manager-row-thread { color: rgb(207 201 222 / .5); }
    .bluesky-studio-page .bluesky-profile-manager-row-thread-marker { background: rgb(35 39 58 / .88); }
    .bluesky-studio-page .bluesky-profile-manager-row-thread.is-reply { color: #85c0ff; }
    .bluesky-studio-page .bluesky-profile-manager-row-thread.is-reply::before { background: #4aa3ff; }
    .bluesky-studio-page .bluesky-profile-manager-row-thread.is-reply .bluesky-profile-manager-row-thread-marker {
      border-color: rgb(93 167 255 / .65);
      background: rgb(42 78 127 / .76);
    }
    .bluesky-studio-page .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-thread.is-reply { color: #e9f4ff; }
    .bluesky-studio-page .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-thread.is-reply::before { background: #a9d9ff; }
    .bluesky-studio-page .bluesky-profile-manager-item.is-selected .bluesky-profile-manager-row-thread.is-reply .bluesky-profile-manager-row-thread-marker {
      border-color: rgb(233 244 255 / .72);
      background: rgb(47 100 163 / .88);
    }
    .bluesky-studio-page .bluesky-profile-manager-detail {
      max-height: 700px;
      overflow: auto;
      padding: 27px;
      background: linear-gradient(180deg, rgb(174 132 239 / .1), transparent 38%), rgb(41 46 68 / .76);
    }
    .bluesky-profile-manager-post-id { display: flex; justify-content: flex-start; align-items: center; gap: 7px; margin: 0; color: #bbb7c8; font-size: .75rem; }
    .bluesky-profile-manager-post-id button { min-width: 32px; min-height: 32px; padding: 4px 7px; border: 1px solid rgb(201 165 255 / .32); color: #eee9f9; background: rgb(30 33 51 / .42); }
    .bluesky-profile-manager-media-label { color: #e7e3ee; font-size: .82rem; font-weight: 750; }
    .bluesky-profile-manager-media-editor,
    .bluesky-profile-manager-preview-images { display: flex; flex-wrap: wrap; gap: 10px; }
    .bluesky-profile-manager-media-tile,
    .bluesky-profile-manager-preview-image {
      position: relative;
      overflow: hidden;
      width: 116px;
      min-height: 108px;
      border: 1px solid rgb(201 165 255 / .26);
      border-radius: 12px;
      background: rgb(26 29 45 / .58);
    }
    .bluesky-profile-manager-preview-image { width: min(100%, 260px); min-height: 0; }
    .bluesky-profile-manager-image-viewer-trigger {
      appearance: none;
      display: block;
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      color: inherit;
      background: transparent;
      cursor: zoom-in;
    }
    .bluesky-profile-manager-preview-image.bluesky-profile-manager-image-viewer-trigger { width: min(100%, 260px); text-align: initial; }
    .bluesky-profile-manager-image-viewer-trigger:focus-visible {
      outline: 3px solid var(--studio-purple-soft);
      outline-offset: -3px;
    }
    .bluesky-profile-manager-media-tile img,
    .bluesky-profile-manager-preview-image img { display: block; width: 100%; height: 76px; object-fit: cover; }
    .bluesky-profile-manager-preview-image img { height: auto; max-height: 310px; }
    .bluesky-profile-manager-media-tile input {
      width: 100%;
      min-height: 34px;
      border: 0;
      border-top: 1px solid rgb(201 165 255 / .18);
      padding: 6px 8px;
      color: #f4f0fa;
      background: transparent;
      font-size: .7rem;
    }
    .bluesky-profile-manager-media-remove { position: absolute; top: 5px; right: 5px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 999px; background: rgb(26 18 39 / .8); color: #fff; }
    .bluesky-profile-manager-media-tile .bluesky-profile-manager-media-edit {
      position: absolute;
      top: 5px;
      left: 5px;
      display: grid;
      place-items: center;
      width: 28px;
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0 0 2px;
      border: 1px solid rgb(201 165 255 / .6);
      border-radius: 999px;
      color: #fff !important;
      background: rgb(26 18 39 / .84) !important;
      box-shadow: none !important;
      font-size: 1rem;
      line-height: 1;
    }
    .bluesky-profile-manager-media-tile .bluesky-profile-manager-media-edit:hover,
    .bluesky-profile-manager-media-tile .bluesky-profile-manager-media-edit:focus-visible {
      border-color: var(--studio-purple-soft);
      background: rgb(111 79 162 / .94) !important;
    }
    .bluesky-profile-manager-media-tile.is-edited::after {
      content: "Edited";
      position: absolute;
      top: 66px;
      left: 5px;
      z-index: 1;
      padding: 2px 6px;
      border-radius: 999px;
      color: #fff;
      background: rgb(111 79 162 / .92);
      font-size: .62rem;
      font-weight: 800;
    }
    .bluesky-profile-manager-media-add {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 6px;
      width: 104px;
      min-height: 100px;
      max-width: 104px;
      border: 1px dashed rgb(201 165 255 / .44);
      color: #ddd5ec;
      background: rgb(69 63 96 / .3);
    }
    .bluesky-profile-manager-media-add span:first-child { font-size: 1.35rem; line-height: 1; }
    .bluesky-profile-manager-media-add span:last-child { font-size: .74rem; }
    .bluesky-studio-page .bluesky-profile-manager-editor textarea { border-color: rgb(201 165 255 / .29); background: rgb(28 32 49 / .72); }
    .bluesky-studio-page .bluesky-profile-manager-row-media img,
    .bluesky-studio-page .bluesky-profile-manager-row-media-more { border-color: rgb(201 165 255 / .35); background: rgb(31 34 53 / .76); }
    .bluesky-studio-page .bluesky-profile-manager-reply-context { border-color: rgb(109 174 255 / .34); background: rgb(74 140 220 / .09); }
    .bluesky-studio-page .bluesky-profile-manager-editor textarea:focus { outline-color: var(--studio-purple-soft); }
    .bluesky-studio-page .bluesky-profile-manager-preview-card { border-color: rgb(201 165 255 / .24); background: rgb(34 38 57 / .68); }
    .bluesky-studio-page .bluesky-profile-manager-detail-actions > button:not(.bluesky-profile-manager-danger) { border-color: var(--studio-purple-soft); color: #25163a; background: var(--studio-purple); }
    .bluesky-studio-page .bluesky-profile-manager-help { color: #d5d1df; }
    .bluesky-studio-page .bluesky-profile-manager-help summary { color: #f4f1f8; }
    html[data-theme-preference] .bluesky-studio-page button.secondary,
    html[data-theme-preference] .bluesky-studio-page .bluesky-profile-manager-refresh,
    html[data-theme-preference] .bluesky-studio-page .bluesky-studio-back {
      border-color: rgb(201 165 255 / .45) !important;
      color: #f7f2ff !important;
      background: rgb(132 100 191 / .2) !important;
    }
    html[data-theme-preference] .bluesky-studio-page .bluesky-profile-manager-filter.is-active,
    html[data-theme-preference] .bluesky-studio-page .bluesky-profile-manager-detail-actions > button:not(.bluesky-profile-manager-danger) {
      border-color: var(--studio-purple-soft) !important;
      color: #25163a !important;
      background: var(--studio-purple) !important;
    }
    html[data-theme-preference] .bluesky-studio-page .bluesky-profile-manager-item.is-selected {
      border-color: #5da7ff !important;
      color: #fff !important;
      background: linear-gradient(100deg, rgb(42 84 140 / .7), rgb(49 47 85 / .75)) !important;
      box-shadow: inset 4px 0 0 #4aa3ff, 0 0 0 1px rgb(74 163 255 / .18) !important;
    }
    html[data-theme-preference] .bluesky-studio-page .bluesky-profile-manager-row { color: inherit !important; background: transparent !important; box-shadow: none !important; }
    @media (max-width: 860px) {
      .bluesky-studio-page-header,
      .bluesky-studio-page .bluesky-profile-manager-workspace { grid-template-columns: 1fr; }
      .bluesky-studio-page .bluesky-profile-manager-head { padding: 18px 0 0; border-top: 1px solid rgb(201 165 255 / .24); border-left: 0; }
      .bluesky-studio-page .bluesky-profile-manager-browser { max-height: min(52dvh, 540px); border-right: 0; border-bottom: 1px solid rgb(201 165 255 / .22); }
      .bluesky-studio-page .bluesky-profile-manager-detail { max-height: none; }
    }
    @media (max-width: 560px) {
      .bluesky-studio-page { width: min(100%, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 15px; border-radius: 16px; }
      .bluesky-studio-owner-avatar { width: 58px; height: 58px; }
      .bluesky-studio-page .bluesky-profile-manager-head { display: grid; gap: 12px; }
      .bluesky-studio-page-actions { justify-content: flex-start; }
      .bluesky-studio-page .bluesky-profile-manager-detail { padding: 17px; }
      .bluesky-profile-manager-media-tile { width: 104px; min-height: 100px; }
      .bluesky-profile-manager-media-add { width: 96px; min-height: 94px; max-width: 96px; }
    }
    /* Phones keep the scrolling post browser in place and open the existing
       editor as a bottom sheet. The state class is added only after a deliberate
       post tap, so opening Studio never traps the owner in the first post. */
    @media (max-width: 700px) {
      body.bluesky-studio-mobile-editor-open { overflow: hidden; }
      .bluesky-studio-page { width: min(100%, calc(100vw - 20px)); max-height: calc(100dvh - 20px); gap: 10px; padding: 12px; border-radius: 18px; }
      .bluesky-studio-page-header { display: block; }
      .bluesky-studio-owner { display: none; }
      .bluesky-studio-page .bluesky-profile-manager-head {
        min-height: 44px;
        padding: 0;
        border: 0;
      }
      .bluesky-studio-page .bluesky-profile-manager-head h2 { font-size: 1.34rem; }
      .bluesky-studio-page .bluesky-profile-manager-kicker,
      .bluesky-studio-page .bluesky-profile-manager-copy { display: none; }
      .bluesky-studio-page-actions { flex-wrap: nowrap; gap: 6px; }
      .bluesky-studio-page .bluesky-profile-manager-refresh,
      .bluesky-studio-page .bluesky-studio-back { min-height: 40px; padding-inline: 9px; }
      .bluesky-studio-page .bluesky-profile-manager-refresh span { display: none; }
      .bluesky-studio-page .bluesky-profile-manager-status { min-height: 1.3em; font-size: .78rem; }
      .bluesky-studio-page .bluesky-profile-manager-workspace {
        display: block;
        min-height: 0;
        overflow: visible;
        border-radius: 15px;
      }
      .bluesky-studio-page .bluesky-profile-manager-browser {
        min-height: min(430px, 58dvh);
        max-height: min(58dvh, 560px);
        padding: 11px;
        border: 0;
        border-radius: 15px;
      }
      .bluesky-studio-page .bluesky-profile-manager-search { min-height: 44px; }
      .bluesky-studio-page .bluesky-profile-manager-filters { gap: 6px; }
      .bluesky-studio-page .bluesky-profile-manager-filter { min-height: 38px; padding-inline: 10px; }
      .bluesky-studio-page .bluesky-profile-manager-detail { display: none; }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-detail {
        position: fixed;
        z-index: 16020;
        right: 8px;
        bottom: 8px;
        left: 8px;
        display: grid;
        max-height: min(72dvh, 680px);
        padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
        overflow: auto;
        overscroll-behavior: contain;
        border: 1px solid rgb(201 165 255 / .45);
        border-radius: 24px 24px 18px 18px;
        background: linear-gradient(180deg, rgb(174 132 239 / .18), transparent 28%), rgb(28 33 51 / .98);
        box-shadow: 0 24px 70px rgb(0 0 0 / .58), 0 0 0 100vmax rgb(4 7 15 / .36);
      }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-detail::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 38px;
        height: 4px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgb(231 225 244 / .44);
      }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-detail-head { padding-top: 2px; }
      .bluesky-profile-manager-detail-close {
        display: inline-grid;
        place-items: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0 0 3px;
        border: 1px solid rgb(201 165 255 / .48);
        border-radius: 12px;
        color: #fff;
        background: rgb(82 68 121 / .5);
        font: inherit;
        font-size: 1.7rem;
        line-height: 1;
      }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-editor textarea { min-height: 108px; }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-media-tile { width: 104px; min-height: 100px; }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-media-add { width: 96px; min-height: 94px; max-width: 96px; }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-media-tile img { height: 76px; }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-detail-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-detail-actions > button,
      .bluesky-studio-page.is-mobile-editor-open .bluesky-profile-manager-detail-actions > a {
        width: 100%;
        min-height: 44px;
        justify-content: center;
      }
    }
    .profile-mobile-followers-menu {
      display: none;
      position: relative;
      min-width: 0;
    }
    .profile-mobile-followers-trigger {
      min-height: 38px;
      display: inline-grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      border-radius: 12px;
      padding: 8px 11px;
      text-align: left;
      white-space: nowrap;
    }
    .profile-mobile-followers-trigger span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .profile-mobile-followers-trigger strong {
      min-width: 28px;
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 2px 8px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: .78rem;
      line-height: 1;
    }
    .profile-mobile-followers-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 88;
      width: min(340px, calc(100vw - 24px));
      padding: 10px;
      border: 1px solid var(--border2);
      border-radius: 20px;
      background: var(--glow), color-mix(in srgb, var(--card) 98%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .profile-mobile-followers-dropdown[hidden] { display: none !important; }
    .profile-mobile-followers-menu.open .profile-mobile-followers-dropdown {
      display: grid;
      gap: 9px;
    }
    .profile-mobile-followers-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 2px 2px 0;
      color: var(--text);
    }
    .profile-mobile-followers-head strong {
      font-size: .88rem;
      font-weight: 880;
    }
    .profile-mobile-followers-head span {
      min-width: 30px;
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
      color: var(--accent);
      font-size: .76rem;
      font-weight: 850;
    }
    .profile-mobile-followers-dropdown-list {
      display: grid;
      gap: 8px;
      max-height: min(48dvh, 360px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      padding: 0 2px 2px 0;
      scrollbar-width: thin;
    }
    .profile-mobile-followers-dropdown-list .contact-row {
      min-width: 0;
    }
    .profile-moderation-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .profile-moderation-wrap[hidden] { display: none !important; }
    .profile-moderation-trigger {
      min-height: 38px;
      border-radius: 12px;
      padding: 8px 13px;
      font-size: .84rem;
      font-weight: 760;
    }
    .profile-moderation-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 90;
      width: 210px;
      padding: 7px;
      display: grid;
      gap: 4px;
      border: 1px solid var(--border2);
      border-radius: 14px;
      background: var(--bg2);
      box-shadow: var(--shadow);
    }
    .profile-moderation-menu[hidden] { display: none !important; }
    .profile-moderation-menu .post-menu-section-title { padding-inline: 10px; }
    .profile-moderation-state {
      margin: 0 2px 4px;
      padding: 8px 10px;
      border: 1px solid color-mix(in srgb, var(--green) 34%, var(--border));
      border-radius: 10px;
      background: color-mix(in srgb, var(--green) 8%, var(--bg3));
      color: var(--green);
      font-size: .75rem;
      font-weight: 820;
      line-height: 1.35;
    }
    .profile-moderation-state.suspended {
      border-color: color-mix(in srgb, var(--red) 38%, var(--border));
      background: color-mix(in srgb, var(--red) 9%, var(--bg3));
      color: var(--red);
    }
    .profile-mobile-social-menu {
      display: none;
      position: relative;
      margin-left: auto;
    }
    .profile-mobile-social-trigger {
      min-width: 42px;
      min-height: 38px;
      padding: 7px 12px;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: 900;
      line-height: 1;
    }
    .profile-mobile-social-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 85;
      width: min(280px, calc(100vw - 32px));
      padding: 8px;
      border: 1px solid var(--border2);
      border-radius: 18px;
      background: var(--glow), color-mix(in srgb, var(--card) 98%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .profile-mobile-social-menu.open .profile-mobile-social-dropdown { display: grid; gap: 7px; }
    .profile-mobile-social-option {
      width: 100%;
      min-height: 54px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      border: 0;
      border-radius: 14px;
      background: transparent;
      color: var(--text);
      text-align: left;
    }
    .profile-mobile-social-option:hover,
    .profile-mobile-social-option:focus-visible {
      background: color-mix(in srgb, var(--accent) 10%, var(--bg3));
      outline: none;
    }
    .profile-mobile-social-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-soft);
      color: var(--accent);
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
      font-weight: 900;
    }
    .profile-mobile-social-copy { display: grid; gap: 2px; min-width: 0; }
    .profile-mobile-social-copy strong { font-size: .88rem; font-weight: 880; }
    .profile-mobile-social-copy small { color: var(--text2); font-size: .74rem; line-height: 1.3; }
    .profile-mobile-social-sheet {
      display: none;
    }
    .profile-mobile-social-sheet[hidden] { display: none !important; }
    .profile-mobile-social-dialog {
      width: 100%;
      display: grid;
      gap: 11px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%),
        color-mix(in srgb, var(--card) 95%, transparent);
      box-shadow: var(--shadow-soft);
    }
    .profile-mobile-social-close {
      min-width: 36px;
      min-height: 34px;
      border-radius: 12px;
      padding: 5px 10px;
      font-size: 1rem;
      line-height: 1;
    }
    .profile-edit-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      border-radius: 12px;
      padding: 8px 13px;
      font-size: .84rem;
      font-weight: 760;
      text-decoration: none;
      background: color-mix(in srgb, var(--bg3) 88%, transparent);
      color: var(--text2);
      border: 1px solid var(--border2);
    }
    .profile-edit-link:hover {
      color: var(--text);
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border2));
      background: color-mix(in srgb, var(--accent) 8%, var(--bg3));
      text-decoration: none;
    }
    .profile-following-panel,
    .profile-followers-panel {
      display: grid;
      gap: 11px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%),
        color-mix(in srgb, var(--card) 95%, transparent);
    }
    .profile-following-panel[hidden],
    .profile-followers-panel[hidden] { display: none !important; }
    .profile-following-list,
    .profile-followers-list { max-height: 330px; }
    .row-action-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 2px 0;
      font-size: .8rem;
      font-weight: 850;
      text-decoration: none;
      color: var(--accent);
      background: transparent !important;
      background-image: none !important;
      box-shadow: none !important;
      white-space: nowrap;
    }
    .row-action-link:hover {
      color: var(--accent-hover);
      background: transparent !important;
      box-shadow: none !important;
      text-decoration: underline;
    }
    .row-action-link.disabled {
      pointer-events: none;
      opacity: .72;
      color: var(--text3);
    }
    .composer {
      display: grid;
      gap: 12px;
      padding: 15px;
      overflow: visible;
      position: relative;
      z-index: 30;
    }
    .composer:focus-within { z-index: 120; }
    .composer-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
    .composer-user { width: 44px; height: 44px; }
    .composer textarea {
      min-height: 92px;
      resize: vertical;
      line-height: 1.45;
      background: color-mix(in srgb, var(--bg3) 55%, transparent);
      border-color: var(--border);
      background-clip: padding-box;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .composer textarea::placeholder { color: var(--text3); }
    .composer-image-intake-hint {
      margin: -6px 0 0 56px;
      color: var(--text3);
      font-size: .74rem;
      line-height: 1.35;
    }
    .composer-image-mode {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin: -4px 0 0 56px;
      color: var(--text2);
      font-size: .78rem;
    }
    .composer-image-mode strong {
      padding: 3px 7px;
      border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
      border-radius: 999px;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 10%, transparent);
    }
    .composer.is-image-post .composer-top textarea {
      border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), color-mix(in srgb, var(--bg3) 55%, transparent);
    }
    .composer.is-dragging-images { outline: 2px dashed color-mix(in srgb, var(--accent) 78%, var(--border)); outline-offset: 4px; }
    .composer.is-dragging-images::after {
      content: "Drop images to add them to your post";
      position: absolute;
      z-index: 380;
      inset: 8px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--border));
      border-radius: 14px;
      color: var(--text);
      background: color-mix(in srgb, var(--bg2) 82%, transparent);
      box-shadow: 0 8px 28px rgb(0 0 0 / .22);
      font-weight: 800;
      pointer-events: none;
    }
    .composer-action-zone {
      position: relative;
      min-width: 0;
      z-index: 360;
    }
    .composer-actions { position: relative; z-index: 2; }
    .composer-actions {
      display: grid;
      grid-template-columns: repeat(5, auto) minmax(180px, 1fr) minmax(118px, auto) auto;
      gap: 8px;
      align-items: center;
    }
    .composer-category-panels {
      display: grid;
      gap: 12px;
      min-width: 0;
      position: relative;
      z-index: 1;
    }
    .composer-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .composer-meta input[type="text"] {
      flex: 1 1 240px;
      min-width: 0;
      background-clip: padding-box;
      overflow: hidden;
    }
    .composer-content-label[hidden] { display: none; }
    .composer-content-label { gap: 8px; }
    .composer-content-label select {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font: inherit;
      padding: 5px 8px;
    }
    .composer-meta label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding-right: 2px;
      color: var(--text2);
      font-size: .78rem;
      font-weight: 800;
    }
    .composer-poll {
      display: grid;
      gap: 9px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--bg3) 54%, transparent);
    }
    .composer-poll[hidden] { display: none; }
    .composer-poll-head,
    .composer-poll-row,
    .composer-poll-foot {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .composer-poll-head { justify-content: space-between; }
    .composer-poll-title { font-size: .88rem; font-weight: 860; color: var(--text); }
    .composer-poll-fieldset,
    .post-poll-fieldset {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }
    .composer-poll-fieldset > legend:not(.visually-hidden) {
      margin: 0 0 7px;
      padding: 0;
      color: var(--text2);
      font-size: .88rem;
      font-weight: 860;
    }
    .post-poll-fieldset { display: grid; gap: 8px; }
    .composer-poll select,
    .composer-poll input {
      min-height: 36px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg);
      color: var(--text);
      padding: 7px 10px;
      outline: none;
    }
	    .composer-poll-row input { flex: 1 1 auto; min-width: 0; }
	    .composer-poll-toggle {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      color: var(--text2);
	      font-size: .78rem;
	      font-weight: 800;
	    }
	    .composer-poll-toggle input[type="checkbox"] {
	      width: 16px;
	      height: 16px;
	      min-height: 16px;
	      padding: 0;
	      flex: 0 0 auto;
	    }
	    .composer-poll-row button,
	    .composer-poll-foot button { min-width: 36px; padding: 0 10px; }
    .composer-poll-row .composer-poll-remove {
      --composer-poll-remove-size: 44px;
      inline-size: var(--composer-poll-remove-size);
      block-size: var(--composer-poll-remove-size);
      width: var(--composer-poll-remove-size);
      height: var(--composer-poll-remove-size);
      min-inline-size: var(--composer-poll-remove-size);
      min-block-size: var(--composer-poll-remove-size);
      max-inline-size: var(--composer-poll-remove-size);
      max-block-size: var(--composer-poll-remove-size);
      flex: 0 0 var(--composer-poll-remove-size);
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      padding: 0 !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      font-size: 1.1rem;
      line-height: 1;
      text-align: center;
      overflow: hidden;
    }
    .composer-poll-foot { justify-content: space-between; flex-wrap: wrap; }
    .composer-poll-note { color: var(--text3); font-size: .74rem; font-weight: 760; }
    .composer-poll-row button:hover,
    .composer-poll-row button:focus-visible,
    .composer-poll-foot button:hover,
    .composer-poll-foot button:focus-visible {
      color: var(--accent);
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, var(--pressed-control-bg-top), var(--pressed-control-bg));
      box-shadow: var(--pressed-control-shadow);
    }
    .composer-poll-row button:active,
    .composer-poll-foot button:active {
      color: var(--accent);
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, var(--pressed-control-bg), color-mix(in srgb, var(--accent) 8%, var(--bg3)));
      box-shadow: var(--pressed-control-shadow-down);
      transform: translateY(1px);
    }
    .composer-tool {
      min-width: 42px;
      min-height: 38px;
      padding: 0 11px;
      display: inline-grid;
      place-items: center;
      color: var(--text2);
    }
    .composer-tool.active,
    .composer-tool[aria-pressed="true"],
    .composer-tool:hover {
      color: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 48%, var(--border2));
      background: color-mix(in srgb, var(--accent) 11%, var(--bg3));
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-soft);
    }
    .composer-tool span { font-size: 1.08rem; line-height: 1; }
    .composer-tool-icon {
      width: 1.18rem;
      height: 1.18rem;
      display: inline-grid;
      place-items: center;
      color: currentColor;
    }
    .composer-tool-icon.composer-tool-emoji {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif;
      font-size: 1.08rem;
      font-weight: 900;
      line-height: 1;
      color: currentColor;
    }
    .composer-tool.active .composer-tool-emoji,
    .composer-tool[aria-pressed="true"] .composer-tool-emoji,
    .composer-tool:hover .composer-tool-emoji {
      color: var(--accent);
    }
    .composer-tool-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.15;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* step162-composer-emoji-body-portal: the picker is portalled to <body> when opened so
       the rounded composer card, container queries, and overflow clipping can never cut it off. */
    .composer-emoji-popover {
      position: fixed;
      z-index: 1400;
      left: var(--composer-emoji-left, 0px);
      top: var(--composer-emoji-top, calc(100% + 8px));
      bottom: auto;
      width: min(374px, var(--composer-emoji-max-width, calc(100vw - 24px)));
      max-width: calc(100vw - 24px);
      max-height: var(--composer-emoji-max-height, min(360px, calc(100vh - 24px)));
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 10px;
      padding: 10px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
      border-radius: 18px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--bg2) 98%, transparent),
          color-mix(in srgb, var(--bg3) 94%, transparent));
      box-shadow:
        0 18px 48px color-mix(in srgb, #000 18%, transparent),
        0 2px 0 rgba(255,255,255,.18) inset;
      backdrop-filter: blur(18px) saturate(1.08);
      transform-origin: top left;
    }
    .composer-emoji-popover[data-ported="body"] {
      position: fixed !important;
      inset: auto auto auto auto;
      isolation: isolate;
      pointer-events: auto;
      contain: layout paint style;
      overscroll-behavior: contain;
    }
    .composer-emoji-popover[hidden] { display: none; }
    .composer-emoji-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
    }
    .composer-emoji-head input {
      width: 100%;
      min-height: 36px;
      border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
      border-radius: 12px;
      background: color-mix(in srgb, var(--bg2) 88%, var(--bg3));
      color: var(--text);
      padding: 8px 12px;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }
    .composer-emoji-head input:focus {
      border-color: color-mix(in srgb, var(--accent) 54%, var(--border2));
      box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
        inset 0 1px 0 rgba(255,255,255,.14);
    }
    .composer-emoji-source { display: none; }
    .composer-emoji-tabs {
      display: flex;
      gap: 5px;
      overflow-x: auto;
      padding: 1px 2px 7px;
      border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 56%, transparent);
      border-radius: 0;
      background: transparent;
      scrollbar-width: none;
    }
    .composer-emoji-tabs::-webkit-scrollbar { display: none; }
    .composer-emoji-tab {
      flex: 0 0 auto;
      inline-size: 28px;
      block-size: 28px;
      min-width: 28px;
      min-height: 28px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
      color: color-mix(in srgb, var(--text2) 88%, transparent);
      display: inline-grid;
      place-items: center;
      cursor: pointer;
      font: inherit;
      font-size: .98rem;
      line-height: 1;
      position: relative;
      transition: color .14s ease, transform .14s ease, filter .14s ease;
    }
    .composer-emoji-tab:hover,
    .composer-emoji-tab:focus-visible {
      background: transparent;
      color: var(--text);
      filter: saturate(1.08);
      outline: none;
      transform: translateY(-1px);
    }
    .composer-emoji-tab.active {
      background: transparent;
      box-shadow: none;
      color: var(--accent);
    }
    .composer-emoji-tab.active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -5px;
      inline-size: 13px;
      block-size: 2px;
      border-radius: 999px;
      background: currentColor;
      transform: translateX(-50%);
      opacity: .9;
    }
    /* step165-composer-emoji-clean-grid: keep every emoji and category icon
       visually unboxed. Fixed-size cells stop browser zoom/container widths from
       stretching the grid into oversized columns. */
    .composer-emoji-results {
      display: grid;
      grid-template-columns: repeat(9, 32px);
      grid-auto-rows: 32px;
      justify-content: center;
      column-gap: 7px;
      row-gap: 8px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      padding: 12px 10px 13px;
      min-height: 168px;
      border: 1px solid color-mix(in srgb, var(--border) 56%, transparent);
      border-radius: 16px;
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%),
        linear-gradient(180deg,
          color-mix(in srgb, var(--bg3) 76%, transparent),
          color-mix(in srgb, var(--bg2) 68%, transparent));
      scrollbar-width: thin;
    }
    .composer-emoji-option {
      inline-size: 32px;
      block-size: 32px;
      min-width: 0;
      justify-self: center;
      align-self: center;
      aspect-ratio: 1 / 1;
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      border-color: transparent;
      border-radius: 10px;
      background: transparent;
      box-shadow: none;
      color: inherit;
      display: grid;
      place-items: center;
      cursor: pointer;
      font: inherit;
      font-size: 1.28rem;
      line-height: 1;
      padding: 0;
      text-shadow: 0 1px 0 rgba(0,0,0,.16);
      transition:
        transform .14s ease,
        background-color .14s ease,
        box-shadow .14s ease,
        filter .14s ease;
    }
    .composer-emoji-option:hover,
    .composer-emoji-option:focus-visible {
      background: color-mix(in srgb, var(--accent) 7%, transparent);
      box-shadow: none;
      filter: saturate(1.12);
      outline: none;
      transform: translateY(-1px) scale(1.08);
    }
    .composer-emoji-empty {
      grid-column: 1 / -1;
      align-self: center;
      justify-self: center;
      color: var(--text3);
      font-weight: 700;
      font-size: .82rem;
      text-align: center;
      padding: 24px 10px;
    }
    .composer-emoji-preview { display: none; }
    #post-tags { grid-column: span 1; min-width: 180px; }
    #post-btn {
      min-width: 78px;
      border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--border2));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent);
    }
    #post-btn:hover,
    #post-btn:focus-visible {
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, white 14%), var(--accent));
      box-shadow: var(--pressed-control-shadow);
    }
    #post-btn:active {
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, black 8%), var(--accent-hover));
      box-shadow: var(--pressed-control-shadow-down);
      transform: translateY(1px);
    }
    .image-input { display: none; }
    .image-preview {
      display: none;
      grid-template-columns: 74px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: color-mix(in srgb, var(--accent) 7%, var(--bg3));
      padding: 9px;
    }
    .image-preview.active { display: grid; }
    .image-preview img, .image-preview video { width: 74px; height: 74px; object-fit: cover; border-radius: 13px; border: 1px solid var(--border2); background: var(--bg); }
    .image-preview strong { display: block; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .image-preview span { display: block; margin-top: 3px; color: var(--text2); font-size: .8rem; }
    .apk-preview {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: color-mix(in srgb, var(--accent) 7%, var(--bg3));
      padding: 9px 12px;
    }
    .apk-preview[hidden] { display: none; }
    .apk-preview strong { display: block; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .apk-preview span { display: block; margin-top: 3px; color: var(--text2); font-size: .8rem; }
    .audio-composer-panel {
      display: grid;
      gap: 11px;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      border-radius: 16px;
      background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 9%, transparent), transparent 34%),
        color-mix(in srgb, var(--partner) 7%, var(--bg3));
      padding: 11px;
    }
    .audio-composer-panel[hidden] { display: none; }
    .audio-composer-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .audio-composer-title {
      display: block;
      color: var(--text);
      font-size: .86rem;
      font-weight: 900;
      letter-spacing: 0;
    }
    .audio-composer-note {
      display: block;
      margin-top: 2px;
      color: var(--text3);
      font-size: .74rem;
      font-weight: 740;
      line-height: 1.35;
    }
    .audio-mode-tabs {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--bg3) 76%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .audio-mode-tab {
      min-height: 34px;
      border-radius: 11px;
      padding: 7px 14px;
      border: 0;
      background: transparent;
      color: var(--text2);
      font-size: .78rem;
      font-weight: 850;
      cursor: pointer;
      transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
    }
    .audio-mode-tab.active {
      --audio-tab-active-bg: color-mix(in srgb, var(--accent) 46%, #06111f);
      color: #ffffff;
      background: var(--audio-tab-active-bg);
      background-image: linear-gradient(180deg, color-mix(in srgb, var(--audio-tab-active-bg) 82%, #ffffff 18%), var(--audio-tab-active-bg)) !important;
      text-shadow: 0 1px 1px rgba(0,0,0,.42);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    }
    .audio-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .audio-fields input,
    .audio-fields select,
    .audio-fields textarea,
    .audio-picker-row input {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      padding: 8px 10px;
      outline: none;
    }
    .audio-fields textarea {
      min-height: 76px;
      resize: vertical;
      grid-column: 1 / -1;
    }
    .audio-field {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: var(--text2);
      font-size: .8rem;
      font-weight: 850;
    }
    .audio-field.audio-field-wide { grid-column: 1 / -1; }
    .audio-format-help {
      grid-column: 1 / -1;
      color: var(--text3);
      font-size: .78rem;
      font-weight: 760;
      line-height: 1.35;
    }
    .audio-inline-help {
      color: var(--text3);
      font-size: .78rem;
      font-weight: 760;
      line-height: 1.32;
    }
    .audio-field-check {
      min-height: 38px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text2);
      font-size: .78rem;
      font-weight: 850;
    }
    .audio-field-check input { width: 18px; min-height: 18px; }
    .audio-podcast-field[hidden],
    .audio-music-field[hidden] { display: none; }
    .audio-picker-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .audio-preview {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }
    .audio-cover-shell {
      position: relative;
      width: 76px;
      aspect-ratio: 1;
      border-radius: 12px;
      border: 1px solid var(--border2);
      background: var(--bg);
      overflow: hidden;
      display: grid;
      place-items: center;
      color: var(--text3);
      font-size: .78rem;
      font-weight: 820;
      text-align: center;
      padding: 6px;
    }
    .audio-cover-preview {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }
    .audio-cover-preview[src] { display: block; }
    .audio-track-list { display: grid; gap: 7px; min-width: 0; }
    .audio-track-preview,
    .audio-track-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--bg2) 84%, transparent);
      padding: 8px;
    }
    .audio-track-preview input {
      min-height: 34px;
      border: 1px solid var(--border2);
      border-radius: 10px;
      background: var(--bg);
      color: var(--text);
      padding: 7px 9px;
      min-width: 0;
    }
    .audio-track-controls { display: flex; gap: 6px; flex-wrap: wrap; }
    .audio-track-controls button {
      min-height: 30px;
      min-width: 34px;
      padding: 4px 8px;
      border-radius: 8px;
    }
    .audio-track-preview small,
    .audio-track-row small { color: var(--text2); font-size: .8rem; }
    .audio-track-preview audio {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 38px;
    }
    .post-audio {
      display: grid;
      gap: 10px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: color-mix(in srgb, var(--partner) 7%, var(--bg3));
      padding: 10px;
    }
    .post-audio-head {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
    }
    .post-audio-cover {
      width: 82px;
      aspect-ratio: 1;
      border-radius: 14px;
      border: 1px solid var(--border2);
      object-fit: cover;
      background: var(--bg);
    }
    .post-audio-cover-empty {
      display: grid;
      place-items: center;
      color: var(--text3);
      font-size: .68rem;
      font-weight: 850;
      text-align: center;
      padding: 6px;
    }
    .post-audio-title { font-weight: 900; overflow-wrap: anywhere; }
    .post-audio-artist { color: var(--text2); font-size: .84rem; margin-top: 3px; overflow-wrap: anywhere; }
    .post-audio-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
    .post-audio-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--border2);
      color: var(--text2);
      background: color-mix(in srgb, var(--bg2) 70%, transparent);
      font-size: .68rem;
      font-weight: 850;
    }
    .post-audio-tracks { display: grid; gap: 8px; }
    .post-audio-track { display: grid; gap: 5px; }
    .post-audio-track audio { width: 100%; min-height: 38px; }
    .post-apk-card {
      display: grid;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: color-mix(in srgb, var(--partner) 7%, var(--bg3));
      padding: 10px;
    }
    .apk-download {
      display: block;
      color: var(--text);
      font-weight: 750;
      font-size: .88rem;
      text-decoration: none;
      overflow-wrap: anywhere;
    }
    .apk-download:hover { text-decoration: underline; }
    .status { min-height: 20px; color: var(--text2); font-size: .8rem; }
    .status.error { color: var(--red); }
    .status.ok { color: var(--green); }
    .offline-post-outbox {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 7%, var(--bg2));
    }
    .offline-post-outbox[hidden] { display: none; }
    .offline-post-outbox-head,
    .offline-post-outbox-copy,
    .offline-post-outbox-actions,
    .offline-post-outbox-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .offline-post-outbox-head { justify-content: space-between; }
    .offline-post-outbox-head span,
    .offline-post-outbox-copy span { color: var(--text2); font-size: .78rem; }
    .offline-post-outbox-list { display: grid; gap: 6px; }
    .offline-post-outbox-row { justify-content: space-between; }
    .offline-post-outbox-copy { flex: 1 1 auto; overflow: hidden; }
    .offline-post-outbox-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .offline-post-outbox-actions { flex: 0 0 auto; }
    .offline-post-outbox-actions .secondary { min-height: 30px; padding: 5px 9px; }
    .post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-height: 40vh; }
    /* The card is a single-column grid; without an explicit minmax(0, 1fr)
       track, wide media children (images, galleries, videos) size the
       implicit column to max-content and bleed past the card's right edge
       on narrow screens, where body overflow-x: hidden then clips them.
       minmax(0, 1fr) keeps every child at or below the card width while the
       card's own overflow stays visible for the kebab dropdown menu. */
    .post { padding: 15px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; position: relative; overflow: visible; }
    .post > * { min-width: 0; }
    /* Browsers that support it can skip offscreen card layout and paint until
       scrolling reaches the card. `auto` preserves the real measured size on
       subsequent visits while the fallback keeps the scroll track stable. */
    @supports (content-visibility: auto) {
      .post-list > article.post {
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
      }
    }
    /* Android WebView and iOS WebKit can occasionally fail to repaint a run of
       `content-visibility: auto` cards after a fast direction reversal.  The
       resulting screen is an empty page even though the post nodes still
       exist.  Native clients favor guaranteed painting here; the lightweight
       feed script still defers nonessential header/expand-control work until a
       card approaches the viewport. */
    html[data-polycule-feed-scroll-cache="native-mobile"] .post-list > article.post {
      content-visibility: visible;
    }
    /* Safari/WKWebView and WebKitGTK need the same retained-paint guard on
       desktop. See WebKit bugs 318216 and 321501: re-entry can relayout or
       leave skipped content blank. Chromium/Firefox retain their normal skip. */
    html[data-polycule-feed-scroll-cache="webkit"] .post-list > article.post {
      content-visibility: visible;
    }
    .post.menu-open { z-index: 45; }
    .post::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
      opacity: .55;
    }
    .post-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
    /* The stacked timestamp row ends well short of the card's 10px grid gap,
       so the header read as detached from the body. Pull only the author to
       body step tighter and leave every other gap in the card alone. */
    .post > .post-author { margin-bottom: -6px; }
    .post .avatar { width: 44px; height: 44px; }
    .post-actions { margin-left: auto; position: relative; display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .post-actions-toggle {
      width: 34px; min-height: 34px; padding: 0; display: grid; place-items: center;
      border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text2); font-size: 1.18rem; line-height: 1;
    }
    .post-actions-toggle:hover, .post-actions.open .post-actions-toggle { background: var(--row-hover); color: var(--text); border-color: var(--border); }
    .post-actions-menu {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: 172px; padding: 7px; display: grid; gap: 4px;
      border: 1px solid var(--border2); border-radius: 14px; background: var(--bg2); box-shadow: var(--shadow);
    }
    .post-actions-menu[hidden] { display: none; }
    .post-menu-section { display: grid; gap: 4px; margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--border); }
    .post-menu-section-title { padding: 3px 10px 1px; color: var(--text3); font-size: .68rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
    .post-menu-item { width: 100%; min-height: 36px; padding: 8px 10px; display: flex; align-items: center; justify-content: flex-start; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font-size: .82rem; font-weight: 760; }
    .post-menu-item:hover { background: var(--row-hover); }
    .post-menu-item.post-delete-btn { color: var(--red); }
    .post-menu-item.post-delete-btn:hover { background: color-mix(in srgb, var(--red) 12%, var(--bg3)); }
    .post-menu-item.post-report-btn { color: var(--yellow); }
    .post.moderated-hidden { border-color: color-mix(in srgb, var(--yellow) 38%, var(--border)); background: color-mix(in srgb, var(--yellow) 5%, var(--card)); }
    .post.deleting { opacity: .55; }
    .post-body { overflow-wrap: anywhere; line-height: 1.55; font-size: .96rem; max-height: 10.1em; overflow: hidden; transition: max-height .25s ease; color: var(--text); }
    .post-body.expanded { max-height: none; overflow: visible; }
    .post-body :where(p, ul, ol, blockquote, pre, h1, h2, h3, h4, h5, h6) { margin: 0 0 .6rem; }
    .post-body > :last-child { margin-bottom: 0; }
    .post-body :where(h1, h2, h3, h4, h5, h6) { font-size: 1.05rem; line-height: 1.3; font-weight: 850; }
    .post-body ul, .post-body ol { padding-left: 1.25rem; }
    .post-body blockquote { border-left: 3px solid color-mix(in srgb, var(--accent) 40%, var(--border2)); padding-left: .75rem; color: var(--text2); }
    .post-body code { padding: .1rem .32rem; border-radius: 7px; background: color-mix(in srgb, var(--bg3) 64%, var(--border2)); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .88em; }
    .post-body pre { overflow-x: auto; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--bg3) 72%, var(--border2)); }
    .post-body pre code { padding: 0; background: transparent; }
    .post-body a.topic-link, .post-body a.feed-mention-link { color: var(--accent); font-weight: 760; text-decoration: none; border-radius: 6px; }
    .post-body a.feed-mention-link { padding: 0 3px; background: var(--accent-soft); }
    .post-body a:hover { text-decoration: underline; }
    .post-warning { color: var(--text2); font-size: .82rem; font-weight: 800; }
    .inline-reply-cw, .remote-reply-cw { color: var(--text2); font-size: .82rem; font-weight: 800; margin-bottom: 4px; }
    .reply-cw, .reply-edit-cw { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); padding: 6px 8px; font: inherit; font-size: .85rem; }
    .reply-sensitive-label, .reply-edit-sensitive-label { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text2); cursor: pointer; }
    .reply-content-label-row { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--text2); }
    .reply-content-label-row[hidden] { display: none; }
    .reply-content-label { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; padding: 4px 8px; }
    .post-poll {
      display: grid;
      gap: 9px;
      padding: 11px;
      border: 1px solid color-mix(in srgb, var(--border) 84%, rgba(255,255,255,.18));
      border-radius: 14px;
      background:
        linear-gradient(155deg, rgba(255,255,255,.08), transparent 42%),
        color-mix(in srgb, var(--card2, var(--bg3)) 54%, transparent);
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.18)) 72%, transparent),
        inset 0 -1px 0 rgba(0,0,0,.10);
    }
    .post-poll-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--text2);
      font-size: .76rem;
      font-weight: 840;
      flex-wrap: wrap;
    }
    .post-poll-options { display: grid; gap: 8px; }
    .post-poll-option-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
      gap: 8px;
    }
    .post-poll-option-row .post-poll-option { min-width: 0; }
    .post-poll-option-report {
      align-self: stretch;
      min-height: 38px;
      border-radius: 12px;
      padding-inline: 11px;
      white-space: nowrap;
      font-size: .78rem;
      font-weight: 850;
    }
    @media (max-width: 560px) {
      .post-poll-option-row { grid-template-columns: 1fr; }
      .post-poll-option-report { justify-self: start; min-height: 34px; }
    }
    .post-poll-option {
      position: relative;
      overflow: hidden;
      min-height: 38px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(255,255,255,.18));
      border-radius: 12px;
      background:
        linear-gradient(155deg, rgba(255,255,255,.10), transparent 40%),
        color-mix(in srgb, var(--card, var(--bg2)) 72%, transparent);
      color: var(--text);
      padding: 8px 10px;
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.18)) 56%, transparent),
        inset 0 -1px 0 rgba(0,0,0,.08);
    }
    .post-poll-option input {
      position: relative;
      width: 18px;
      height: 18px;
      appearance: none;
      -webkit-appearance: none;
      accent-color: var(--poll-led-primary, var(--accent));
      border: 1px solid color-mix(in srgb, var(--glass-edge, var(--border2)) 68%, rgba(255,255,255,.34));
      border-radius: 999px;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0%, transparent 58%),
        linear-gradient(145deg,
          color-mix(in srgb, var(--card-strong, var(--bg2)) 84%, rgba(255,255,255,.10)),
          color-mix(in srgb, var(--bg2) 78%, rgba(0,0,0,.06)));
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,.16),
        inset 0 -1px 2px rgba(0,0,0,.16),
        0 0 0 1px color-mix(in srgb, var(--poll-led-primary, var(--accent)) 6%, transparent);
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
    }
    .post-poll-option input[type="checkbox"] { border-radius: 5px; }
    .post-poll-option input:disabled { cursor: default; opacity: .96; }
    .post-poll-option input:checked {
      border-color: var(--poll-led-ring, color-mix(in srgb, #ffffff 82%, var(--poll-led-primary, var(--accent)) 18%));
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 18%, transparent 20%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--poll-led-primary, var(--accent)) 34%, white 22%) 0 42%, transparent 44%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--poll-led-secondary, var(--accent3, var(--accent2, var(--accent)))) 24%, transparent) 0 66%, transparent 68%),
        linear-gradient(145deg,
          color-mix(in srgb, var(--poll-led-primary, var(--accent)) 18%, rgba(255,255,255,.20)),
          color-mix(in srgb, var(--card-strong, var(--bg2)) 84%, transparent));
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, rgba(255,255,255,.30) 70%, transparent),
        inset 0 -1px 2px color-mix(in srgb, var(--poll-led-primary, var(--accent)) 14%, transparent),
        0 0 0 1px color-mix(in srgb, var(--poll-led-ring, var(--poll-led-primary, var(--accent))) 34%, transparent),
        0 0 12px color-mix(in srgb, var(--poll-led-primary, var(--accent)) 20%, transparent),
        0 0 22px color-mix(in srgb, var(--poll-led-secondary, var(--accent3, var(--accent2, var(--accent)))) 14%, transparent);
      filter: saturate(1.04);
      transform: scale(1.03);
    }
    .post-poll-option:has(input:checked) {
      border-color: var(--poll-selected-border, color-mix(in srgb, var(--poll-led-primary, var(--accent)) 38%, rgba(255,255,255,.36)));
      background: var(--poll-selected-bg,
        linear-gradient(155deg, rgba(255,255,255,.14), transparent 40%),
        radial-gradient(ellipse at 10% 50%, color-mix(in srgb, var(--poll-led-primary, var(--accent)) 12%, transparent), transparent 42%),
        color-mix(in srgb, var(--card, var(--bg2)) 72%, transparent)) !important;
      box-shadow: var(--poll-selected-shadow,
        inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.18)) 58%, transparent),
        inset 0 -1px 0 rgba(0,0,0,.08),
        0 0 16px color-mix(in srgb, var(--poll-led-primary, var(--accent)) 10%, transparent)) !important;
    }
    .post-poll-option .poll-bar {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--poll-pct, 0%);
      background: var(--poll-bar-bg,
        linear-gradient(90deg,
          color-mix(in srgb, var(--poll-led-primary, var(--accent)) 16%, transparent),
          color-mix(in srgb, var(--poll-led-secondary, var(--accent2, var(--accent))) 10%, transparent)));
      opacity: .72;
      pointer-events: none;
    }
    .post-poll-option span,
    .post-poll-option strong,
    .post-poll-option input { position: relative; z-index: 1; }
    .post-poll-option strong { font-size: .82rem; color: var(--text2); white-space: nowrap; }
    .post-poll-label { overflow-wrap: anywhere; font-weight: 780; }
    @media (prefers-reduced-motion: reduce) {
      .post-poll-option input { transition: none; }
    }
	    .post-poll-foot {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      color: var(--text3);
	      font-size: .76rem;
	      font-weight: 780;
	    }
	    .post-poll-add-option {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      flex-wrap: wrap;
	    }
	    .post-poll-add-option input {
	      flex: 1 1 180px;
	      min-width: 0;
	      min-height: 32px;
	      border: 1px solid color-mix(in srgb, var(--border) 84%, rgba(255,255,255,.18));
	      border-radius: 10px;
	      background: var(--bg);
	      color: var(--text);
	      padding: 6px 10px;
	      outline: none;
	    }
	    .post-poll-add-option button {
	      min-height: 32px;
	      padding: 6px 10px;
	    }
	    .post-poll-vote,
	    .post-poll-close {
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border2));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    }
    .post-poll-vote:hover,
    .post-poll-vote:focus-visible,
    .post-poll-close:hover,
    .post-poll-close:focus-visible {
      color: var(--accent);
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, var(--pressed-control-bg-top), var(--pressed-control-bg));
      box-shadow: var(--pressed-control-shadow);
    }
    .post-poll-vote:active,
    .post-poll-close:active {
      color: var(--accent);
      border-color: var(--pressed-control-border);
      background:
        linear-gradient(180deg, var(--pressed-control-bg), color-mix(in srgb, var(--accent) 8%, var(--bg3)));
      box-shadow: var(--pressed-control-shadow-down);
      transform: translateY(1px);
    }
    /* step169-feed-expand-center-label: keep Show more/less centered even after theme button layers. */
    .post-expand-btn { background: transparent; border: none; color: var(--accent); display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 0; padding: 0; text-align: center !important; line-height: 1.2; font-size: .78rem; font-weight: 800; }
    .post > .post-expand-btn:not(.post-top-toggle-btn) { width: 100% !important; justify-self: stretch; align-self: stretch; box-sizing: border-box; }
    .post-expand-btn__label { display: block !important; width: 100% !important; margin-inline: auto !important; text-align: center !important; pointer-events: none !important; }
    .post-expand-btn:hover { background: transparent; transform: none; text-decoration: underline; }
    /* step181-feed-top-expand-toggle: keep the compact duplicate directly before the kebab.
       step185-feed-top-toggle-accent-and-dot-alignment: its visible pill uses
       the same accent surface as the full-width control, while its top and
       bottom track the three-dot kebab glyph instead of the larger hit area.
       step186-feed-top-toggle-optical-centering: the compact pill is offset
       from the kebab's transparent hit area, not its visible dots. Pull its
       visible edge closer and lift the label by a half pixel for optical
       centering without reducing either control's click target. */
    .post-top-toggle-btn {
      flex: 0 0 auto;
      position: relative;
      top: -1px;
      margin-inline-end: -6px;
      line-height: 1;
      height: 1.1rem;
      min-height: 1.1rem;
      padding: 0 12px;
      font-size: .76rem;
      white-space: nowrap;
      border: 1px solid color-mix(in srgb, var(--accent), transparent 58%);
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent), transparent 8%);
      color: var(--on-accent, #06111f);
    }
    .post-top-toggle-btn > .post-expand-btn__label {
      display: inline-flex !important;
      width: 100% !important;
      height: 100%;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transform: translateY(-.5px);
    }
    .post-top-toggle-btn:hover, .post-top-toggle-btn:focus-visible { text-decoration: none; background: var(--accent-hover); border-color: var(--accent); }
    /* step179-feed-remote-media-contain: .post-image can be either a figure wrapper or the image itself. */
    .post-image {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(100%, 720px);
      max-width: 100%;
      max-height: 620px;
      margin: 0;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: var(--bg);
      cursor: zoom-in;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .post-image > img,
    img.post-image {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      object-fit: contain;
      border-radius: inherit;
    }
    .post-image > img {
      max-height: inherit;
      border: 0;
      box-shadow: none;
    }
    img.post-image {
      max-height: 620px;
    }
    /* Multiple images on one post (e.g. a Bluesky/Mastodon post with 2-4
       attachments) render as a grid instead of only the first image. Centre
       the capped gallery in wider cards; full-width mobile galleries keep
       zero effective inline margin. */
    .post-image-gallery {
      display: grid;
      gap: 6px;
      width: min(100%, 720px);
      max-width: 100%;
      margin-inline: auto;
    }
    .post-image-gallery .post-image {
      width: 100%;
      max-height: 420px;
    }
    .post-image-gallery .post-image > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .post-image-gallery-count-1 {
      grid-template-columns: 1fr;
    }
    .post-image-gallery-count-1 .post-image {
      max-height: 620px;
    }
    .post-image-gallery-count-2,
    .post-image-gallery-count-3,
    .post-image-gallery-count-4 {
      grid-template-columns: 1fr 1fr;
    }
    .post-image-gallery-count-3 .post-image:first-child {
      grid-column: span 2;
    }
    /* Video and explicitly marked GIFV posts share the same card geometry. */
    .post-video {
      display: flex;
      position: relative;
      width: min(100%, 720px);
      max-width: 100%;
      max-height: 620px;
      /* A capped desktop frame should sit in the middle of its post card;
         the narrow-screen width: 100% rule below leaves no inline gap. */
      margin: 0 auto;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: var(--bg);
    }
    .post-video--gifv {
      background: #090b10;
    }
    .post-video__gif-trigger {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      display: grid;
      width: 76px;
      min-height: 0;
      aspect-ratio: 1;
      padding: 0;
      place-items: center;
      transform: translate(-50%, -50%);
      border: 0;
      border-radius: 50%;
      background: transparent url('/static/branding/gif-trigger-translucent.svg?v=1') center / 134% no-repeat;
      box-shadow: none;
      color: transparent;
      cursor: pointer;
      font-size: 0;
      text-shadow: none;
      appearance: none;
      transition: opacity 0.16s ease, transform 0.16s ease, filter 0.16s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .post-video__gif-trigger:hover {
      filter: brightness(1.08);
    }
    .post-video__gif-trigger:active {
      transform: translate(-50%, -50%) scale(0.94);
      filter: brightness(1.08);
    }
    .post-video__gif-trigger:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }
    .post-video--gifv.is-playing .post-video__gif-trigger {
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.86);
    }
    .post-video__play-trigger {
      position: absolute;
      z-index: 4;
      top: 50%;
      left: 50%;
      display: grid;
      width: 68px;
      height: 68px;
      min-width: 68px;
      min-height: 68px;
      aspect-ratio: 1;
      padding: 0 0 0 4px;
      place-items: center;
      box-sizing: border-box;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 50%;
      background: rgba(7, 12, 19, .74);
      box-shadow: 0 3px 14px rgba(0, 0, 0, .42);
      color: #fff;
      cursor: pointer;
      font-size: 28px;
      line-height: 1;
      appearance: none;
      transition: transform .16s ease, background-color .16s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .post-video__play-trigger:hover { background: rgba(7, 12, 19, .9); transform: translate(-50%, -50%); }
    .post-video__play-trigger:active { background: rgba(7, 12, 19, .94); transform: translate(-50%, -50%); }
    .post-video__play-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) {
      .post-video__gif-trigger,
      .post-video__play-trigger {
        transition: none;
      }
    }
    .post-video video {
      display: block;
      width: 100%;
      max-height: 620px;
      object-fit: contain;
      border-radius: inherit;
    }
    .post-link-card {
      display: flex;
      gap: 0;
      width: min(100%, 720px);
      margin-top: 4px;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      background: var(--bg);
      transition: border-color .15s ease;
    }
    .post-link-card:hover { border-color: var(--accent); }
    .post-link-card-thumb { flex: 0 0 120px; max-width: 120px; background: var(--card, var(--bg)); }
    .post-link-card-thumb img { display: block; width: 100%; height: 100%; min-height: 90px; object-fit: cover; }
    .post-link-card-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 13px; min-width: 0; justify-content: center; }
    .post-link-card-title {
      font-size: .92rem; font-weight: 800; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .post-link-card-desc {
      font-size: .82rem; color: var(--text2); line-height: 1.35;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .post-link-card-domain { font-size: .74rem; color: var(--text2); }
    .tags { display: flex; gap: 7px; flex-wrap: wrap; }
    .tag, .topic-link-row {
      color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
      border-radius: 999px; padding: 4px 9px; font-size: .74rem; line-height: 1.2; text-decoration: none; font-weight: 820; cursor: pointer;
    }
    .tag:hover, .topic-link-row:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 16%, transparent); }
    .post-social-row { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text2); }
    .post-social-row .social-spacer { flex: 1 1 auto; }
    html[data-theme-preference] .post-social-row.post-save-icon-only > .social-spacer { display: none; }
    html[data-theme-preference] .post-social-row.post-save-icon-only > [data-action="save"] {
      box-sizing: border-box !important;
      flex: 0 0 var(--post-save-compact-width) !important;
      width: var(--post-save-compact-width) !important;
      min-width: 44px !important;
      padding-inline: 4px !important;
      margin-inline-start: auto;
      justify-content: center;
      gap: 0 !important;
      position: relative;
    }
    html[data-theme-preference] .post-social-row.post-save-icon-only [data-label="save"] {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .post-social-btn, .post-action, .post-reply-count {
      min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; color: var(--text2); background: transparent; border: 1px solid transparent; font-size: .78rem; font-weight: 800;
    }
    .post-social-btn:hover, .post-action:hover, .post-reply-count:hover { background: var(--row-hover); border-color: var(--border); color: var(--text); text-decoration: none; transform: none; }
    .post-social-btn.react.active, .post-action.active { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
    .post-social-btn.boost.active, .post-action[data-action="boost"].active { color: var(--accent); background: var(--accent-soft); }
    .post-social-btn.bookmark.active, .post-action[data-action="save"].active { color: var(--accent); background: var(--accent-soft); }
    .quick-reply-form { display: grid; gap: 8px; padding-top: 8px; }
    .quick-reply-form[hidden] { display: none; }
    .quick-reply-form textarea { width: 100%; resize: vertical; min-height: 74px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); padding: 10px 11px; font: inherit; line-height: 1.4; }
    .quick-reply-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .quick-reply-actions select { min-height: 34px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); padding: 0 10px; font-size: .78rem; font-weight: 800; }
    .quick-reply-actions .reply-bluesky-note { margin-right: auto; font-size: .74rem; font-weight: 700; color: var(--text2); }
    .inline-reply-thread { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
    .inline-reply-thread[hidden] { display: none; }
    .inline-reply-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text2); font-size: .78rem; font-weight: 820; }
    .inline-reply-list { display: grid; gap: 4px; position: relative; }
    /* Keep a continuous rail in a WebView-safe parent layer. The individual
       card pseudo-elements remain as a desktop fallback, but are suppressed
       once the parent rail is active so the line is never doubled. */
    .inline-reply-list.inline-reply-list-rail::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 9px;
      width: 3px;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--accent) 88%, var(--border2)),
        color-mix(in srgb, var(--accent) 58%, var(--border2))
      );
      border-radius: 1px;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
      pointer-events: none;
      z-index: 0;
    }
    .inline-reply-list.inline-reply-list-rail > .inline-reply-chain::before { content: none; }
    .inline-reply-list.inline-reply-list-rail > .inline-reply-chain { z-index: 1; }
    .inline-reply-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg2) 74%, transparent); }
    .inline-reply-item.reply-depth-1 { margin-left: 18px; position: relative; }
    .inline-reply-item.reply-depth-2 { margin-left: 34px; position: relative; }
    .inline-reply-item.inline-reply-chain { position: relative; overflow: visible; }
    .inline-reply-chain::before {
      content: '';
      position: absolute;
      top: -6px;
      bottom: -6px;
      width: 3px;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--accent) 88%, var(--border2)),
        color-mix(in srgb, var(--accent) 58%, var(--border2))
      );
      border-radius: 1px;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
      pointer-events: none;
      z-index: 1;
    }
    .inline-reply-chain.inline-reply-chain-start::before { top: 0; }
    .inline-reply-chain.inline-reply-chain-end::before { bottom: 0; }
    .inline-reply-item.reply-depth-1.inline-reply-chain::before { left: -9px; }
    .inline-reply-main { min-width: 0; }
    .inline-reply-avatar { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg3); color: var(--text3); display: grid; place-items: center; overflow: hidden; font-size: .72rem; font-weight: 850; }
    .inline-reply-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .inline-reply-meta { position: relative; display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline; color: var(--text3); padding-right: 34px; font-size: .73rem; margin-bottom: 3px; }
    .inline-reply-meta .inline-reply-time { flex: 0 0 100%; margin-top: -3px; }
    /* The comment menu is appended after the full-width time row, so as an
       in-flow flex child it wrapped onto a third line and left ~45px of dead
       space between the timestamp and the reply body. Park it in the reserved
       gutter instead so the meta block is only the name and time rows. */
    .inline-reply-meta > .reply-action-menu { position: absolute; top: 50%; right: 0; margin-left: 0; transform: translateY(-50%); }
    .inline-reply-author { color: var(--text); font-weight: 820; text-decoration: none; }
    .image-gallery { display: grid; gap: 8px; }
    .image-gallery[hidden] { display: none; }
    .image-preview-detail { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
    .image-alt-label { color: var(--text2); font-size: .74rem; font-weight: 780; margin-top: 2px; }
    #post-image-alt { width: 100%; min-width: 0; }
    .image-alt-hint { color: var(--text3); font-size: .7rem; line-height: 1.35; }
    .remote-source-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 800; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; line-height: 1.6; white-space: nowrap; }
    /* Delivery states are only ever rendered for the author's own posts. */
    .remote-source-badge-sending { color: var(--text3); border-style: dashed; }
    .bluesky-delivery-spinner { width: .66em; height: .66em; box-sizing: border-box; flex: 0 0 auto; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: polycule-delivery-spinner-spin .72s linear infinite; }
    .remote-source-badge-failed { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: color-mix(in srgb, var(--red) 10%, var(--bg3)); }
    @media (prefers-reduced-motion: reduce) { .bluesky-delivery-spinner { animation: none; } }
    .bluesky-delivery-failure-toast { position: fixed; z-index: 700; right: 18px; bottom: 18px; width: min(390px, calc(100vw - 36px)); display: grid; gap: 8px; padding: 13px; border: 1px solid color-mix(in srgb, var(--red) 58%, var(--border)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--red) 16%, var(--bg2)), var(--bg2)); box-shadow: var(--shadow); color: var(--text); }
    .bluesky-delivery-failure-toast[hidden] { display: none; }
    .bluesky-delivery-failure-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--red); }
    .bluesky-delivery-failure-toast-head strong { font-size: .88rem; font-weight: 880; }
    .bluesky-delivery-failure-toast-close { min-width: 30px; min-height: 30px; padding: 3px 8px; border-radius: 10px; color: inherit; font-size: 1rem; line-height: 1; }
    .bluesky-delivery-failure-toast p { margin: 0; color: var(--text); font-size: .82rem; font-weight: 700; line-height: 1.42; overflow-wrap: anywhere; }
    .bluesky-delivery-failure-toast small { color: var(--text2); font-size: .74rem; line-height: 1.35; }
    @media (max-width: 700px) { .bluesky-delivery-failure-toast { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); width: min(390px, calc(100vw - 24px)); } }
    .inline-reply-context { color: var(--text3); font-size: .72rem; margin: -1px 0 4px; }
    .inline-reply-body { color: var(--text); font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
    .inline-reply-body :where(p, ul, ol, blockquote, pre) { margin: 0 0 .45rem; }
    .inline-reply-body > :last-child { margin-bottom: 0; }
    .inline-reply-actions { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
    .inline-reply-action { min-height: 28px; padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text2); font-size: .73rem; font-weight: 800; }
    .inline-reply-action:hover { background: var(--row-hover); border-color: var(--border); color: var(--text); transform: none; }
    .inline-reply-action.active { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
    .link-button { border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text2); padding: 4px 8px; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
    .link-button:hover { background: var(--row-hover); border-color: var(--border); color: var(--text); }
    .link-button.active { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
    .quick-reply-form.reply-nested-form { margin-top: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg3) 54%, transparent); }
    .post-share-feedback { color: var(--green); font-size: .78rem; font-weight: 850; min-height: 1em; }
    .post-share-feedback[hidden] { display: none; }
    .empty { color: var(--text2); padding: 18px; font-size: .86rem; line-height: 1.4; }
    .topic-list, .suggest-list { display: grid; gap: 8px; }
    .topic-row, .suggest-row {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
      min-height: 38px; border-radius: 13px; padding: 7px 8px; color: var(--text); background: color-mix(in srgb, var(--bg3) 48%, transparent);
    }
    .topic-row:hover, .suggest-row:hover { background: var(--row-hover); text-decoration: none; }
    .suggest-row { grid-template-columns: auto minmax(0, 1fr) auto; }

    /* Feed rail row shading.
       Reuse the soft raised style on the Who to follow, Following, and Feed
       views rows, but keep the glow compact so rows do not cast the wide
       grey-blue shadow visible in the screenshots. */
    .rail {
      --feed-rail-row-bg: color-mix(in srgb, var(--bg3) 58%, transparent);
      --feed-rail-row-bg-2: color-mix(in srgb, var(--card) 74%, var(--bg3));
      --feed-rail-row-border: color-mix(in srgb, var(--accent) 34%, var(--border));
      --feed-rail-row-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.18)) 54%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent);
      --feed-rail-row-shadow-hover:
        inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.22)) 66%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
      --feed-rail-row-shadow-pressed:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -10px 18px color-mix(in srgb, var(--accent) 10%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
      --feed-rail-row-shadow-down:
        inset 0 2px 7px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    .rail :is(.topic-row, .suggest-row, .contact-row, .feed-view-link) {
      border-color: var(--feed-rail-row-border) !important;
      background-color: var(--feed-rail-row-bg) !important;
      background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--feed-rail-row-bg-2) 86%, rgba(255,255,255,.18)), var(--feed-rail-row-bg)) !important;
      background-blend-mode: normal !important;
      box-shadow: var(--feed-rail-row-shadow) !important;
    }
    .rail :is(.topic-row, .suggest-row, .contact-row, .feed-view-link):hover {
      border-color: color-mix(in srgb, var(--accent) 44%, var(--border2)) !important;
      background-color: color-mix(in srgb, var(--accent) 9%, var(--feed-rail-row-bg)) !important;
      background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--feed-rail-row-bg-2)), color-mix(in srgb, var(--accent) 6%, var(--feed-rail-row-bg))) !important;
      box-shadow: var(--feed-rail-row-shadow-hover) !important;
      text-decoration: none;
    }
    .rail .feed-view-link.active,
    .rail .feed-view-link[aria-current="page"] {
      border-color: color-mix(in srgb, var(--accent) 52%, var(--border2)) !important;
      background-color: color-mix(in srgb, var(--accent) 12%, var(--feed-rail-row-bg)) !important;
      background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, var(--feed-rail-row-bg-2)), color-mix(in srgb, var(--accent) 8%, var(--feed-rail-row-bg))) !important;
      box-shadow: var(--feed-rail-row-shadow-pressed) !important;
    }
    .rail .feed-view-link:active {
      border-color: color-mix(in srgb, var(--accent) 56%, var(--border2)) !important;
      background-color: color-mix(in srgb, var(--accent) 10%, var(--feed-rail-row-bg)) !important;
      background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--feed-rail-row-bg-2)), color-mix(in srgb, var(--accent) 6%, var(--feed-rail-row-bg))) !important;
      box-shadow: var(--feed-rail-row-shadow-down) !important;
      transform: translateY(1px);
    }
    .suggest-row .avatar { width: 36px; height: 36px; font-size: .8rem; }
    .suggest-main strong { display: block; font-size: .83rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .suggest-main span { display: block; color: var(--text2); font-size: .72rem; margin-top: 2px; }
    .suggest-profile-link {
      display: inline-block;
      max-width: 100%;
      color: var(--text);
      text-decoration: none;
      border-radius: 8px;
      padding: 1px 4px;
      margin-left: -4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .suggest-profile-link:hover,
    .suggest-profile-link:focus-visible {
      color: var(--accent);
      background: var(--accent-soft);
      text-decoration: none;
      outline: none;
    }
    .mini-graph-card { overflow: hidden; }
    .mini-graph-status {
      min-height: 17px;
      margin-top: 8px;
      color: var(--text3);
      font-size: .72rem;
      line-height: 1.3;
    }
    .mini-graph-stage {
      position: relative;
      height: 172px;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      margin-top: 10px;
      background:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px),
        radial-gradient(circle at 50% 52%, var(--accent-soft), transparent 48%),
        color-mix(in srgb, var(--bg3) 52%, transparent);
      background-size: 28px 28px, 28px 28px, auto, auto;
    }
    .mini-graph-stage svg,
    .mini-graph-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .mini-graph-stage svg { z-index: 1; pointer-events: none; }
    .mini-graph-layer { z-index: 2; }
    .mini-graph-stage line {
      stroke: color-mix(in srgb, var(--partner) 76%, var(--border2));
      stroke-width: 2.2;
      stroke-linecap: round;
      filter: drop-shadow(0 2px 5px rgba(0,0,0,.12));
    }
    .mini-graph-stage line.metamour {
      stroke: color-mix(in srgb, var(--metamour) 78%, var(--border2));
      stroke-width: 1.8;
      stroke-dasharray: 5 6;
    }
    .mini-graph-stage line.ex,
    .mini-graph-stage line.ended {
      stroke: color-mix(in srgb, var(--ex) 80%, var(--border2));
      stroke-width: 1.9;
      stroke-dasharray: 4 5;
    }
    .mini-node {
      position: absolute;
      height: 30px;
      min-width: 30px;
      max-width: 128px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 3px 9px 3px 3px;
      border: 1px solid var(--border2);
      border-radius: 999px;
      background: color-mix(in srgb, var(--card) 92%, var(--accent));
      color: var(--text);
      box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
      transform: translate(-50%, -50%);
      overflow: hidden;
      cursor: pointer;
      text-decoration: none;
      transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
    }
    .mini-node:hover,
    .mini-node:focus-visible {
      transform: translate(-50%, -50%) scale(1.04);
      z-index: 4;
      text-decoration: none;
      border-color: var(--accent);
      box-shadow: 0 12px 30px rgba(15, 23, 42, .24);
      background: color-mix(in srgb, var(--card) 82%, var(--accent));
    }
    .mini-node:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 70%, #fff);
      outline-offset: 3px;
    }
    .mini-node.you { border-color: color-mix(in srgb, var(--accent) 70%, var(--border2)); }
    .mini-node.partner { border-color: color-mix(in srgb, var(--partner) 74%, var(--border2)); }
    .mini-node.metamour { border-color: color-mix(in srgb, var(--metamour) 74%, var(--border2)); }
    .mini-node.ex { border-color: color-mix(in srgb, var(--ex) 76%, var(--border2)); }
    .mini-node.other { border-color: color-mix(in srgb, var(--other) 66%, var(--border2)); }
    .mini-node.compact {
      width: 24px;
      height: 24px;
      padding: 0;
      justify-content: center;
    }
    .mini-node-avatar {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      overflow: hidden;
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
      border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border2));
      font-size: .64rem;
      font-weight: 850;
    }
    .mini-node.partner .mini-node-avatar { border-color: color-mix(in srgb, var(--partner) 38%, var(--border2)); }
    .mini-node.metamour .mini-node-avatar { border-color: color-mix(in srgb, var(--metamour) 42%, var(--border2)); }
    .mini-node.ex .mini-node-avatar { border-color: color-mix(in srgb, var(--ex) 45%, var(--border2)); }
    .mini-node-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mini-node-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: .8rem;
      font-weight: 850;
      line-height: 1;
    }
    .mini-node.compact .mini-node-label { display: none; }
    /* step175-mini-graph-loading-spinner: keep hard-refresh graph preview calm while data loads. */
    .mini-graph-loading {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--card) 42%, transparent);
      pointer-events: none;
    }
    .mini-graph-spinner {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
      border-top-color: color-mix(in srgb, var(--accent) 78%, var(--text));
      animation: mini-graph-spinner-spin 1.4s linear infinite;
    }
    .mini-graph-loading[hidden],
    .mini-graph-empty[hidden] {
      display: none !important;
    }
    .mini-graph-stage.is-loading .mini-graph-empty {
      display: none !important;
    }
    @keyframes mini-graph-spinner-spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .mini-graph-spinner { animation: none; }
    }
    .mini-graph-empty {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: none;
      place-items: center;
      text-align: center;
      padding: 18px;
      color: var(--text2);
      background: color-mix(in srgb, var(--card) 58%, transparent);
      font-size: .78rem;
      line-height: 1.35;
    }
    .mini-graph-stage.is-empty .mini-graph-empty { display: grid; }
    .mini-graph-counts,
    .mini-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
      color: var(--text2);
      font-size: .72rem;
    }
    .mini-graph-counts span,
    .mini-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .mini-graph-counts i,
    .mini-legend i { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
    .rail-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: .78rem; font-weight: 820; }
    .rail-link {
      min-height: 0;
      padding: 0;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      overflow: visible !important;
      isolation: auto;
      color: var(--accent);
      text-decoration: none;
    }
    .rail-link:hover {
      color: var(--accent-hover);
      background: transparent !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
      text-decoration: underline;
    }
    .mention-suggest, .tag-suggest {
      position: absolute;
      left: 64px;
      top: 120px;
      z-index: 140;
      width: min(360px, calc(100% - 82px));
      max-height: 265px;
      overflow-y: auto;
      display: none;
      background: var(--bg2);
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border2));
      border-radius: 16px;
      box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
      padding: 6px;
      overscroll-behavior: contain;
    }
    .tag-suggest {
      background:
        linear-gradient(var(--bg2), var(--bg2)),
        var(--bg);
    }
    .mention-suggest.active, .tag-suggest.active { display: block; }
    .mention-suggest-item, .tag-suggest-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 11px;
      cursor: pointer;
      color: var(--text);
      border-radius: 12px;
      transition: background .08s, color .08s;
      text-align: left;
    }
    .mention-suggest-item:hover, .tag-suggest-item:hover,
    .mention-suggest-item.focus, .tag-suggest-item.focus {
      background: var(--row-hover);
    }
    .mention-suggest-avatar, .tag-suggest-hash {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .78rem;
      font-weight: 850;
      flex-shrink: 0;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border2));
    }
    .mention-suggest-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mention-suggest-name, .tag-suggest-name { font-weight: 760; font-size: .88rem; }
    .mention-suggest-bio { color: var(--text3); font-size: .72rem; margin-top: 1px; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tag-suggest-stats { color: var(--text3); font-size: .7rem; margin-left: auto; white-space: nowrap; }
    .feed-profile-popover {
      position: fixed; z-index: 140; display: none; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: start;
      width: min(310px, calc(100vw - 24px)); padding: 12px; background: color-mix(in srgb, var(--bg2) 96%, transparent);
      border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); pointer-events: none; backdrop-filter: blur(16px);
    }
    .feed-profile-popover.active { display: grid; }
    .feed-profile-popover-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 850; }
    .feed-profile-popover-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .feed-profile-popover-name { display: flex; align-items: center; gap: 6px; font-weight: 850; min-width: 0; }
    .feed-profile-popover-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .feed-profile-popover-check { color: var(--green); font-size: .76rem; font-weight: 850; }
    .feed-profile-popover-bio { margin-top: 3px; color: var(--text2); font-size: .82rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .feed-profile-popover-hint { margin-top: 6px; color: var(--text3); font-size: .72rem; }
    body.image-viewer-open, body.edit-post-open { overflow: hidden; }
    .image-viewer { position: fixed; inset: 0; z-index: 16030; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.84); }
    .image-viewer.active { display: flex; }
    .image-viewer-board { position: relative; max-width: min(94vw, 1200px); max-height: 92vh; display: grid; place-items: center; }
    .image-viewer-board img { display: block; max-width: 100%; max-height: 92vh; object-fit: contain; border-radius: 18px; border: 1px solid color-mix(in srgb, #fff 18%, transparent); background: #050505; box-shadow: 0 18px 70px rgba(0,0,0,.44); }
    .image-viewer-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; min-height: 38px; padding: 0; }
    /* Prev/next are the desktop (click) alternative to mobile swipe
       navigation between images in a multi-image post. */
    .image-viewer-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      min-height: 46px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.5);
      color: #fff;
      border: 1px solid rgba(255,255,255,.24);
      font-size: 1.6rem;
      line-height: 1;
      cursor: pointer;
    }
    .image-viewer-nav:hover { background: rgba(0,0,0,.72); }
    .image-viewer-nav[hidden] { display: none; }
    .image-viewer-prev { left: 10px; }
    .image-viewer-next { right: 10px; }
    .image-viewer-counter {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.62);
      color: #fff;
      font-size: .8rem;
      font-weight: 700;
    }
    .image-viewer-counter[hidden] { display: none; }
    @media (max-width: 640px) {
      .image-viewer-nav { width: 40px; height: 40px; min-height: 40px; font-size: 1.4rem; }
    }
    .delete-toast-container { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 10001; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
    .delete-toast { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border2); border-radius: 16px; background: var(--bg2); color: var(--text2); padding: 11px 13px; font-size: .88rem; box-shadow: var(--shadow); }
    .delete-toast-revert { background: var(--accent); color: var(--on-accent, #fff); border: none; border-radius: 10px; padding: 6px 10px; font-size: .8rem; font-weight: 760; cursor: pointer; }
    .edit-post-modal { display: none; position: fixed; inset: 0; background: rgba(8, 11, 20, .62); z-index: 16000; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); backdrop-filter: blur(10px) saturate(1.08); -webkit-backdrop-filter: blur(10px) saturate(1.08); }
    .edit-post-dialog { position: relative; isolation: isolate; overflow: auto; background: radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--accent, #a77cf2) 18%, transparent), transparent 42%), linear-gradient(145deg, color-mix(in srgb, var(--bg3, var(--card, #20242a)) 92%, var(--accent, #a77cf2) 8%), color-mix(in srgb, var(--bg2, var(--card-strong, #16181b)) 94%, black 6%)); border: 1px solid color-mix(in srgb, var(--accent, #a77cf2) 32%, var(--border2, var(--border, rgba(148, 163, 184, .28)))); border-radius: 22px; width: min(640px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); padding: clamp(14px, 2.4vw, 20px); display: grid; gap: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 46px rgba(0, 0, 0, .22), var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
    .edit-post-dialog::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 34%, transparent 66%, rgba(255, 255, 255, .05)); opacity: .46; z-index: 0; }
    .edit-post-dialog > * { position: relative; z-index: 1; }
    .edit-post-dialog h3 { font-size: 1.05rem; font-weight: 880; }
    .edit-post-dialog .composer-top { grid-template-columns: 42px minmax(0, 1fr); align-items: start; }
    .edit-post-body { min-height: 170px; width: 100%; resize: vertical; }
    .edit-post-dialog .composer-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
    .edit-post-dialog .composer-meta label { min-height: 44px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border2); border-radius: 14px; padding: 9px 11px; color: var(--text2); background: color-mix(in srgb, var(--bg3) 72%, transparent); font-weight: 800; }
    .edit-post-dialog .composer-meta input[type="text"], .edit-post-tags { width: 100%; }
    .edit-post-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .edit-post-save { background: var(--accent); color: var(--on-accent, #fff); }
    .edit-post-cancel { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2) !important; }
    .edit-post-error { color: var(--red); font-size: .78rem; min-height: 18px; }
    @media (max-width: 760px) { .edit-post-dialog .composer-meta { grid-template-columns: 1fr; } }
    /* The legacy .mobile-tabbar markup was removed from the feed template:
       the unified mobile nav (with Tasks) is the single bottom navigation.
       Keep the class hidden with priority so any cached fragment of the old
       bar can never reappear beside it. */
    .mobile-tabbar { display: none !important; }
    @media (max-width: 1180px) {
      .feed-app { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); }
      .right-rail { display: none; }
    }
    @media (max-width: 850px) {
      /* The bottom reserve must clear the fixed unified nav (66px) plus its
         edge gap, plus the larger Android gesture/navigation inset tracked
         by the theme's safe-area max variable. The previous fixed 5.8rem
         clipped post content under the nav on edge-to-edge devices. */
      .shell { padding: 10px; padding-bottom: calc(6.4rem + max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 36px))); }
      .feed-hero { grid-template-columns: 1fr; }
      .hero-actions { justify-content: stretch; }
      .feed-search-wrap { min-width: 0; }
      .quick-nav { display: flex; }
      .feed-app { grid-template-columns: 1fr; gap: 12px; }
      body.profile-page .feed-app { grid-template-columns: 1fr; justify-content: stretch; }
      .left-rail { position: static; display: block; }
      .left-rail .panel { display: none; }
      .left-rail .panel.feed-view-panel,
      .left-rail .panel.following-panel { display: block; }
      body.profile-page .left-rail.profile-left-rail { display: none; }
      body.profile-page .profile-mobile-followers-menu { display: block; }
      body.profile-page .profile-mobile-social-menu { display: block; }
      body.profile-page .profile-mobile-social-sheet.active {
        position: fixed;
        inset: 0;
        z-index: 10020;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
        background: rgba(0, 0, 0, .52);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      body.profile-page .profile-mobile-social-dialog {
        width: min(100%, 520px);
        max-height: min(calc(100dvh - 48px), 640px);
        margin: auto;
        overflow: hidden;
        border-radius: 24px;
        box-shadow: 0 24px 90px rgba(0,0,0,.44);
      }
      body.profile-social-modal-open { overflow: hidden; }
      body.profile-page .profile-mobile-social-sheet .contacts-list {
        display: grid;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: min(62dvh, 470px);
        overscroll-behavior: contain;
        padding: 0 2px 4px 0;
        scrollbar-width: thin;
      }
      body.profile-page .profile-mobile-social-sheet .contact-row { min-width: 0; }
      .contacts-list { display: flex; flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
      .contact-row { min-width: 218px; }
      .feed-head { display: none; }
      .composer-top { grid-template-columns: 38px minmax(0, 1fr); }
      .composer-image-intake-hint,
      .composer-image-mode { margin-left: 50px; }
      .composer-user { width: 38px; height: 38px; }
      .composer-actions { grid-template-columns: repeat(5, auto) minmax(0, 1fr); }
      .composer-emoji-popover { width: min(100%, var(--composer-emoji-max-width, calc(100vw - 24px))); }
      .composer-emoji-results { grid-template-columns: repeat(7, 32px); }
      #post-tags { grid-column: 1 / -1; min-width: 0; }
      #post-visibility { grid-column: 1 / 3; }
      #post-btn { grid-column: 6 / 7; }
    }
    @media (max-width: 560px) {
      .brand h1 { font-size: 1.35rem; }
      .panel, .composer, .post, .feed-head { border-radius: 18px; }
      .composer { padding: 12px; }
      .composer-actions { grid-template-columns: repeat(5, auto) minmax(0, 1fr); }
      .composer-emoji-popover { width: min(100%, var(--composer-emoji-max-width, calc(100vw - 24px))); max-height: var(--composer-emoji-max-height, min(340px, calc(100vh - 24px))); }
      .composer-emoji-results { grid-template-columns: repeat(6, 32px); }
      .composer-emoji-head { grid-template-columns: 1fr; }
      #post-visibility { grid-column: 1 / 3; }
      #post-btn { grid-column: 6 / 7; }
      .inline-reply-item.reply-depth-1 { margin-left: 12px; }
      .inline-reply-item.reply-depth-2 { margin-left: 20px; }
      .inline-reply-item.reply-depth-1.inline-reply-chain::before { left: -6px; }
      .inline-reply-list.inline-reply-list-rail::before { left: 6px; }
      .image-preview { grid-template-columns: 58px minmax(0,1fr); }
      .image-preview img { width: 58px; height: 58px; }
      .image-preview button { grid-column: 1 / -1; }
      .audio-fields,
      .audio-preview,
      .post-audio-head { grid-template-columns: 1fr; }
      .audio-cover-shell,
      .post-audio-cover { width: 64px; }
      .post-social-row { flex-wrap: wrap; }
      .post-social-row .social-spacer { display: none; }
    }

    /* step111-mobile-feed-profile-layout-polish
       Mobile-only finishing pass for the Rust feed/profile surfaces. */
    @media (max-width: 850px) {
      .shell {
        padding: 8px 10px;
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
      }
      .feed-hero {
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background:
          linear-gradient(135deg, var(--accent-soft), transparent 54%),
          color-mix(in srgb, var(--card) 94%, transparent);
        box-shadow: var(--shadow-soft);
      }
      body.profile-page .feed-hero { margin-bottom: 8px; }
      .brand-kicker {
        min-height: 24px;
        margin-bottom: 6px;
        padding: 4px 9px;
        font-size: .7rem;
      }
      .brand h1 { font-size: clamp(1.28rem, 7vw, 1.72rem); }
      .brand p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .82rem;
      }
      .quick-nav {
        position: sticky;
        top: max(8px, env(safe-area-inset-top));
        z-index: 62;
        margin: 0 -10px 10px;
        padding: 4px 10px 10px;
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--bg3) 94%, transparent), color-mix(in srgb, var(--bg3) 72%, transparent) 72%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }
      .feed-view-switcher { gap: 6px; }
      .quick-nav a,
      .quick-nav button {
        min-height: 34px;
        padding: 7px 12px;
      }
      .feed-view-switcher a {
        justify-content: center;
        min-width: clamp(72px, 20vw, 112px);
        scroll-snap-align: start;
        text-align: center;
      }
      .feed-app { gap: 10px; }
      /* The Feed view card remains available as the narrow accordion. The
         template supplies its disclosure state, while the sticky quick nav
         remains a convenient route shortcut. */
      .left-rail .panel.feed-view-panel { display: block; }
      .left-rail .panel.following-panel {
        display: block;
        padding: 12px;
        border-radius: 20px;
      }
      .left-rail .panel.following-panel .panel-head {
        align-items: center;
        gap: 10px;
      }
      .contacts-list {
        gap: 8px;
        margin-inline: -2px;
        padding-inline: 2px;
        scroll-snap-type: x proximity;
      }
      .contact-row {
        min-width: min(220px, 78vw);
        scroll-snap-align: start;
      }
      .composer {
        gap: 10px;
        padding: 12px;
        border-radius: 22px;
      }
      .composer textarea {
        min-height: 78px;
        font-size: .95rem;
      }
      .composer-actions {
        gap: 7px;
        align-items: stretch;
      }
      .composer-tool {
        min-width: 38px;
        min-height: 38px;
      }
      .post-list { gap: 4px; }
      .post {
        gap: 9px;
        padding: 12px;
        border-radius: 22px;
      }
      .post .avatar {
        width: 38px;
        height: 38px;
        font-size: .78rem;
      }
      .post-author { gap: 9px; }
      .post-actions-toggle {
        width: 36px;
        min-height: 36px;
        border-color: var(--border);
        background: color-mix(in srgb, var(--bg3) 70%, transparent);
      }
      .post-body {
        font-size: .94rem;
        line-height: 1.52;
        max-height: 9.2em;
      }
      .post-image {
        width: 100%;
        max-height: 72dvh;
        border-radius: 16px;
      }
      .post-image > img,
      img.post-image {
        max-height: 72dvh;
      }
      .post-image-gallery .post-image {
        max-height: 42dvh;
      }
      .post-image-gallery-count-1 .post-image {
        max-height: 72dvh;
      }
      .post-video {
        width: 100%;
        max-height: 72dvh;
        border-radius: 16px;
      }
      .post-video video {
        max-height: 72dvh;
      }
      /* Only mid-width phones/tablets use a horizontal scroll strip for the
         social actions; on the narrowest screens the ≤560px rule wraps the
         buttons into two rows instead (this rule used to load later at equal
         specificity and override that wrap, clipping buttons off-card). */
      @media (min-width: 561px) {
        .post-social-row {
          gap: 6px;
          overflow-x: auto;
          flex-wrap: nowrap;
          scrollbar-width: none;
        }
        .post-social-row::-webkit-scrollbar { display: none; }
        .post-social-btn,
        .post-action,
        .post-reply-count {
          flex: 0 0 auto;
          min-height: 36px;
          padding: 7px 10px;
        }
      }
      .post-social-row .social-spacer { display: none; }
    }

    @media (max-width: 850px) {
      body.profile-page .main { gap: 10px; }
      body.profile-page .profile-summary-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 11px;
        padding: 13px;
        border-radius: 24px;
        align-items: center;
        background:
          linear-gradient(135deg, color-mix(in srgb, var(--partner) 16%, transparent), transparent 58%),
          color-mix(in srgb, var(--card) 96%, transparent);
      }
      body.profile-page .profile-summary-avatar {
        width: 48px;
        height: 48px;
        font-size: .9rem;
      }
      body.profile-page .profile-summary-main { gap: 6px; }
      body.profile-page .profile-summary-main > strong { font-size: 1.06rem; }
      body.profile-page .profile-summary-main > span { font-size: .76rem; }
      body.profile-page .profile-summary-main p {
        font-size: .84rem;
        line-height: 1.42;
      }
      body.profile-page .profile-summary-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 7px;
        width: 100%;
        margin-top: 4px;
      }
      body.profile-page .bluesky-profile-manager {
        padding: 13px;
        border-radius: 20px;
      }
      body.profile-page .profile-edit-link,
      body.profile-page #profile-follow-btn {
        width: 100%;
        min-height: 40px;
        border-radius: 14px;
      }
      body.profile-page .profile-mobile-followers-menu {
        min-width: 0;
        justify-self: stretch;
      }
      body.profile-page .profile-mobile-followers-trigger {
        width: 100%;
        min-height: 40px;
        border-radius: 14px;
      }
      body.profile-page .profile-mobile-followers-dropdown {
        right: 0;
        width: min(340px, calc(100vw - 24px));
        border-radius: 20px;
      }
      body.profile-page .profile-mobile-social-menu { margin-left: 0; }
      body.profile-page .profile-mobile-social-trigger {
        min-width: 42px;
        min-height: 40px;
        border-radius: 14px;
      }
      body.profile-page .profile-moderation-wrap { justify-content: end; }
      body.profile-page .profile-moderation-trigger {
        min-height: 40px;
        border-radius: 14px;
        white-space: nowrap;
      }
      body.profile-page .profile-mobile-social-dropdown {
        right: 0;
        width: min(320px, calc(100vw - 24px));
        border-radius: 20px;
      }
      body.profile-page .profile-mobile-social-dialog {
        border-radius: 24px 24px 20px 20px;
      }
    }

    @media (max-width: 560px) {
      body.profile-page .profile-summary-actions {
        grid-template-columns: minmax(0, 1fr) auto;
      }
      body.profile-page .profile-mobile-followers-menu {
        grid-column: 1 / -1;
      }
      body.profile-page .profile-mobile-followers-dropdown {
        left: 0;
        right: auto;
        width: 100%;
      }
      body.profile-page .profile-moderation-wrap {
        grid-column: 1 / -1;
      }
      body.profile-page .profile-moderation-trigger { width: 100%; }
      body.profile-page .bluesky-profile-manager-head { align-items: center; }
      body.profile-page .bluesky-profile-manager-head .secondary { min-height: 38px; }
      .post-top-toggle-btn {
        max-width: min(40vw, 110px);
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }


/* step112-theme-continuity: feed CSS keeps theme-continuity marker for compat. */


/* step113-mobile-topics-audio-hero-polish */
.pc-mobile-page-hero {
  display: none;
}

@media (max-width: 780px) {
  .pc-mobile-page-hero {
    display: block;
    position: sticky;
    top: 0;
    z-index: 42;
    margin: 0 0 0.85rem;
    padding: 0.88rem;
    border: 1px solid var(--pc-border, rgba(148, 163, 184, 0.28));
    border-radius: 1.15rem;
    color: var(--pc-text, inherit);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--pc-accent, #38bdf8) 16%, transparent), transparent 48%),
      color-mix(in srgb, var(--pc-surface, #ffffff) 88%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--pc-shadow, #020617) 13%, transparent);
    backdrop-filter: blur(18px) saturate(1.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
  }

  .pc-mobile-page-hero__eyebrow {
    margin-bottom: 0.28rem;
    color: var(--pc-muted, #64748b);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .pc-mobile-page-hero__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .pc-mobile-page-hero h1 {
    margin: 0;
    font-size: clamp(1.16rem, 6vw, 1.48rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
  }

  .pc-mobile-page-hero p {
    max-width: 25rem;
    margin: 0.24rem 0 0;
    color: var(--pc-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .pc-mobile-page-hero__pill {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--pc-accent, #38bdf8) 38%, var(--pc-border, transparent));
    border-radius: 999px;
    padding: 0.42rem 0.68rem;
    color: var(--pc-on-accent, #ffffff);
    background: var(--pc-accent, #38bdf8);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--pc-accent, #38bdf8) 20%, transparent);
  }

  .pc-mobile-page-hero__nav {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    margin-top: 0.74rem;
    padding: 0.15rem 0 0.08rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pc-mobile-page-hero__nav::-webkit-scrollbar {
    display: none;
  }

  .pc-mobile-page-hero__nav a {
    flex: 0 0 auto;
    border: 1px solid var(--pc-border, rgba(148, 163, 184, 0.28));
    border-radius: 999px;
    padding: 0.43rem 0.72rem;
    color: var(--pc-text, inherit);
    background: color-mix(in srgb, var(--pc-surface-2, #f8fafc) 78%, transparent);
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
  }

  .pc-mobile-page-hero__nav a[aria-current="page"],
  .pc-mobile-page-hero__nav a:hover {
    color: var(--pc-on-accent, #ffffff);
    background: var(--pc-accent, #38bdf8);
    border-color: color-mix(in srgb, var(--pc-accent, #38bdf8) 62%, transparent);
  }

  .topics-page,
  .topic-page,
  .audio-discover-page,
  .audio-discover-shell,
  .pc-topic-shell,
  .pc-topics-shell {
    padding-bottom: calc(6.4rem + max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 36px)));
  }

  .topics-grid,
  .topic-grid,
  .topic-list,
  .audio-release-grid,
  .audio-grid,
  .audio-discover-grid {
    grid-template-columns: 1fr !important;
    gap: 0.72rem !important;
  }

  .topic-card,
  .topic-post-card,
  .audio-release-card,
  .audio-track-card,
  .post-audio-card {
    border-radius: 1rem !important;
    padding: 0.82rem !important;
  }

  .topic-actions,
  .topic-card-actions,
  .topic-filter-row,
  .topic-chip-row,
  .audio-filter-row,
  .audio-type-selector,
  .audio-track-actions,
  .audio-release-actions {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.12rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topic-actions::-webkit-scrollbar,
  .topic-card-actions::-webkit-scrollbar,
  .topic-filter-row::-webkit-scrollbar,
  .topic-chip-row::-webkit-scrollbar,
  .audio-filter-row::-webkit-scrollbar,
  .audio-type-selector::-webkit-scrollbar,
  .audio-track-actions::-webkit-scrollbar,
  .audio-release-actions::-webkit-scrollbar {
    display: none;
  }

  .topic-actions > *,
  .topic-card-actions > *,
  .topic-filter-row > *,
  .topic-chip-row > *,
  .audio-filter-row > *,
  .audio-type-selector > *,
  .audio-track-actions > *,
  .audio-release-actions > * {
    flex: 0 0 auto;
  }

  .audio-type-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .audio-type-selector > * {
    min-width: 0;
    text-align: center;
  }

  .audio-cover,
  .audio-release-cover,
  .post-audio-cover {
    width: 4.25rem !important;
    height: 4.25rem !important;
    border-radius: 0.9rem !important;
  }
}
/* step114-mobile-notification-account-dropbar-polish: mobile notification/account dropbar polish marker. */

/* step115-mobile-audio-topics-menu-dropbar-polish */

/* step116-dead-code-warning-triage: source-level warning triage marker for compat diagnostics. */


/* step117-mobile-chats-menu-dynamic-hide */
.pc-mobile-chat-menu {
  display: none;
}

@media (max-width: 760px) {
  .pc-mobile-chat-menu {
    position: fixed;
    z-index: 1045;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.48rem;
    border-radius: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--theme-border, rgba(148, 163, 184, 0.34)) 72%, transparent);
    background: color-mix(in srgb, var(--theme-surface, rgba(15, 23, 42, 0.9)) 74%, transparent);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
  }

  .pc-mobile-chat-menu .pc-mobile-page-menu__item {
    min-height: 3.05rem;
    border-radius: 1rem;
    padding: 0.35rem 0.22rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    color: var(--theme-muted, #64748b);
    text-decoration: none;
    font-size: 0.72rem;
    line-height: 1.05;
  }

  .pc-mobile-chat-menu .pc-mobile-page-menu__item span {
    font-size: 1.05rem;
    line-height: 1;
  }

  .pc-mobile-chat-menu .pc-mobile-page-menu__item.is-active {
    color: var(--theme-on-accent, #fff);
    background: linear-gradient(135deg, var(--theme-accent, #0ea5e9), var(--theme-accent-strong, #2563eb));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 24px color-mix(in srgb, var(--theme-accent, #0ea5e9) 36%, transparent);
  }

  .pc-mobile-chat-room-menu {
    transform: translateY(0);
    opacity: 0.96;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .pc-mobile-chat-room-menu.is-hidden {
    transform: translateY(calc(100% + 1.35rem));
    opacity: 0.08;
    pointer-events: none;
  }

  .pc-chat-room-shell,
  .chat-room-shell,
  .chat-thread-shell {
    padding-bottom: calc(6.2rem + max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 36px)));
  }
}


/* step118-mobile-account-admin-moderation-polish: account/admin/moderation mobile polish is applied through theme_application.css. */

/* step118-mobile-account-admin-moderation-polish */

/* step119-mobile-diagnostics-security-system-polish: marker retained for cross-page mobile polish guards */

/* step120-mobile-navigation-consistency: feed/audio/topics mobile nav participates in final consistency pass. */

/* step120-mobile-navigation-consistency-fix-visible-artifacts */

/* step120-mobile-navigation-unified-bottom-bar: feed/profile use the same unified mobile nav as other Rust pages. */

/* step120-mobile-navigation-overflow-duplicate-fix: unified mobile nav overflow fix participates in feed/profile styling. */

/* step120-mobile-nav-test-alignment: feed/profile unified mobile nav test alignment. */

/* step120-mobile-nav-fixed-bottom-final: unified mobile nav remains fixed to viewport bottom. */

/* step120-mobile-nav-profile-active-state: profile route highlights Profile in the unified mobile nav. */

/* step120-mobile-tray-close-ghost-fix: mobile tray close button is hidden unless a tray is open. */
/* step120-mobile-nav-profile-active-test-robust-v2: profile tab active-state test is robust to JS formatting. */

/* step120-mobile-nav-loading-timeout-fix: mobile nav scripts no longer use document-wide MutationObservers. */

/* step120-theme-continuity-live-template-fix: feed/chats/topics/polycule use the same saved-theme contract. */

/* step120-mobile-hamburger-settings-option: mobile hamburger exposes Settings without changing bottom nav. */

/* step120-mobile-profile-link-from-any-route: profile link no longer falls back to Home from non-feed routes. */

/* step120-polycule-graph-theme-continuity-fix: Polycule graph uses saved theme tokens instead of light graph fallback. */

/* step120-navbar-markup-and-desktop-mobile-nav-fix: desktop hides mobile bottom nav; navbar hidden user hook is outside <nav> attrs. */


/* step120-feed-desktop-zoom-overlap-fix: prevent feed composer/right-rail overlap at browser zoom or narrow laptop widths. */
.feed-shell,
.pc-feed-shell,
.feed-page,
[data-feed-zoom-overlap-fix="true"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
.pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
:is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
  min-width: 0;
  max-width: 100%;
  align-items: start;
}

.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
  min-width: 0;
  max-width: 100%;
}

.feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer),
.pc-feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer) {
  min-width: 0;
  max-width: 100%;
  overflow: clip;
}

.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .feed-composer-actions, .pc-composer-actions) > *,
.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .feed-composer-actions, .pc-composer-actions) > * {
  min-width: 0;
  flex: 0 1 auto;
}

.feed-shell :is(button[type="submit"], .post-button, .btn-post, .composer-submit, [data-composer-submit]),
.pc-feed-shell :is(button[type="submit"], .post-button, .btn-post, .composer-submit, [data-composer-submit]) {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}

.feed-shell :is(input, textarea, select),
.pc-feed-shell :is(input, textarea, select) {
  min-width: 0;
  max-width: 100%;
}

.feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card),
.pc-feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) :is(canvas, svg, img),
.pc-feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) :is(canvas, svg, img) {
  max-width: 100%;
  height: auto;
}

/* 120% browser zoom on laptop often lands in this range. Stop forcing 3 columns. */
@media (max-width: 1380px) and (min-width: 921px) {
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) !important;
    column-gap: clamp(0.85rem, 1.4vw, 1.25rem) !important;
  }

  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .feed-composer-actions, .pc-composer-actions),
  .pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .feed-composer-actions, .pc-composer-actions) {
    justify-content: flex-start;
  }

  .feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .feed-composer-actions, .pc-composer-actions) :is(input[name="tags"], .tag-input, .tags-input, .composer-tags),
  .pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .feed-composer-actions, .pc-composer-actions) :is(input[name="tags"], .tag-input, .tags-input, .composer-tags) {
    flex: 1 1 16rem;
  }
}

/* Smaller tablets / very zoomed desktop: single safe column. */
@media (max-width: 920px) {
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* step120-navbar-leak-test-hardening: navbar leak test hardened; desktop mobile nav hidden. */


/* step120-feed-right-rail-smooth-zoom-breakpoint: right rail enters smoothly only when desktop width can actually hold it. */
.feed-shell,
.pc-feed-shell,
.feed-page,
[data-feed-right-rail-smooth-zoom="true"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  --pc-feed-left-rail-width: clamp(220px, 18vw, 300px);
  --pc-feed-right-rail-width: clamp(260px, 22vw, 360px);
  --pc-feed-gap: clamp(0.85rem, 1.25vw, 1.35rem);
}

.feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
.pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
:is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
  min-width: 0 !important;
  max-width: 100% !important;
  gap: var(--pc-feed-gap) !important;
  align-items: start !important;
}

.feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Wide desktop: only here may the right rail sit beside the composer. */
@media (min-width: 1661px) {
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(220px, var(--pc-feed-left-rail-width))
      minmax(0, 1fr)
      minmax(260px, var(--pc-feed-right-rail-width)) !important;
  }

  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: auto !important;
    width: auto !important;
    display: block !important;
  }
}

/* Zoomed laptop / 120% desktop: keep the right rail below, not beside the composer. */
@media (max-width: 1660px) and (min-width: 921px) {
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(210px, min(28vw, 300px))
      minmax(0, 1fr) !important;
  }

  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: var(--pc-feed-gap) !important;
    align-items: start !important;
  }
}

/* Single-column safety for smaller windows and strong zoom. */
@media (max-width: 920px) {
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Composer and rail content containment: no sideways spill into graph cards. */
.feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer),
.pc-feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer),
.feed-shell :is(.feed-card, .post-card, .card, .panel),
.pc-feed-shell :is(.feed-card, .post-card, .card, .panel) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: clip;
}

.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) > *,
.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) > * {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.feed-shell :is(input, textarea, select, button),
.pc-feed-shell :is(input, textarea, select, button) {
  max-width: 100% !important;
}

.feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card),
.pc-feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) :is(canvas, svg, img),
.pc-feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) :is(canvas, svg, img) {
  max-width: 100% !important;
  height: auto;
}


/* step120-feed-zoom-gap-after-rail-fix: when right rail is below, stretch the center feed into the freed space. */
@media (max-width: 1660px) and (min-width: 921px) {
  .feed-shell,
  .pc-feed-shell,
  .feed-page,
  [data-feed-zoom-gap-fix="true"] {
    width: 100% !important;
    max-width: none !important;
  }

  .feed-shell > :is(.container, .content, .page, .page-grid, .feed-container, .feed-content),
  .pc-feed-shell > :is(.container, .content, .page, .page-grid, .feed-container, .feed-content),
  .feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    justify-content: stretch !important;
    align-items: start !important;
    grid-template-columns:
      minmax(230px, clamp(250px, 22vw, 320px))
      minmax(0, 1fr) !important;
    column-gap: clamp(0.9rem, 1.2vw, 1.25rem) !important;
  }

  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    grid-column: auto !important;
  }

  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > *,
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > *,
  .feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
  .pc-feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0.75rem !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: clamp(0.85rem, 1.2vw, 1.2rem) !important;
  }

  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) > *,
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Very wide desktop keeps the proper 3-column composition. */
@media (min-width: 1661px) {
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Extra containment for composer rows after the center column stretches. */
.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.feed-shell :is(textarea, input, select),
.pc-feed-shell :is(textarea, input, select) {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* step120-feed-magical-fluid-rail-breakpoints: fluid feed rails for zoomed desktop without missing right rail or overlap. */
.feed-shell,
.pc-feed-shell,
.feed-page,
[data-feed-magical-fluid-rails="true"] {
  --pc-feed-left-fluid: clamp(220px, 17vw, 300px);
  --pc-feed-right-fluid: clamp(260px, 21vw, 350px);
  --pc-feed-gap-fluid: clamp(0.8rem, 1.05vw, 1.25rem);
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow-x: clip;
}

.feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
.pc-feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
:is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  gap: var(--pc-feed-gap-fluid) !important;
  align-items: start !important;
}

.feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Magical wide desktop / zoomed-out laptop: show all three regions again. */
@media (min-width: 1500px) {
  .feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(220px, var(--pc-feed-left-fluid))
      minmax(0, 1fr)
      minmax(260px, var(--pc-feed-right-fluid)) !important;
  }

  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: var(--pc-feed-right-fluid) !important;
    justify-self: stretch !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Normal/zoomed laptop: two columns, right rail below so no overlap. */
@media (max-width: 1499px) and (min-width: 1101px) {
  .feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(215px, clamp(230px, 24vw, 310px))
      minmax(0, 1fr) !important;
  }

  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: var(--pc-feed-gap-fluid) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Tight desktop/tablet: one column, no disappearing sidebars. */
@media (max-width: 1100px) {
  .feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .pc-feed-shell :is(.feed-container, .feed-content, .feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Make center contents breathe with the new 3-column threshold. */
.feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.pc-feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > *,
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  gap: 0.55rem !important;
}

.feed-shell :is(input, textarea, select, button),
.pc-feed-shell :is(input, textarea, select, button) {
  max-width: 100% !important;
}

.feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card),
.pc-feed-shell :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* step120-polycule-manage-close-x: Manage Polycule offcanvas close button renders a visible ✖. */

/* step120-trans-polyclule-graph-self-pill-match-navbar: Trans-theme Polycule self node matches navbar account pill. */

/* step120-trans-polycule-runtime-self-pill: runtime patches generated Polycule self node to Trans navbar pill colors. */

/* step120-polycule-hide-empty-relationship-overlay: Polycule graph empty overlay veil is hidden, graph stays visible. */

/* step120-trans-polycule-graph-counts-white: Polycule graph count text is white/readable in Trans theme. */

/* step120-mobile-tray-stack-and-settings-dedupe: mobile tray/settings duplication fixed at high zoom. */


/* step120-feed-runtime-layout-guard-zoom-fix: guarded feed layout for browser zoom; no floating composer or collapsed post column. */
.pc-feed-layout-runtime-guard,
.pc-feed-layout-runtime-guard * {
  box-sizing: border-box;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  display: grid !important;
  gap: clamp(0.85rem, 1.1vw, 1.25rem) !important;
  align-items: start !important;
  position: relative !important;
  overflow: visible !important;
}

.pc-feed-layout-runtime-guard [data-feed-left-rail="true"],
.pc-feed-layout-runtime-guard [data-feed-main-column="true"],
.pc-feed-layout-runtime-guard [data-feed-right-rail="true"] {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: none !important;
  z-index: auto !important;
}

.pc-feed-layout-runtime-guard [data-feed-main-column="true"] {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.9rem, 1.1vw, 1.25rem) !important;
  justify-self: stretch !important;
}

.pc-feed-layout-runtime-guard [data-feed-main-column="true"] > *,
.pc-feed-layout-runtime-guard :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
}

.pc-feed-layout-runtime-guard :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.pc-feed-layout-runtime-guard :is(textarea, input, select, button) {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Enough real room: left + main + right. */
.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="wide"] {
  grid-template-columns:
    minmax(220px, clamp(240px, 18vw, 305px))
    minmax(0, 1fr)
    minmax(260px, clamp(280px, 22vw, 355px)) !important;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="wide"] [data-feed-left-rail="true"] {
  grid-column: 1 !important;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="wide"] [data-feed-main-column="true"] {
  grid-column: 2 !important;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="wide"] [data-feed-right-rail="true"] {
  grid-column: 3 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Zoomed laptop / side-panel browser: left + main, right below. */
.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="middle"] {
  grid-template-columns:
    minmax(210px, clamp(230px, 25vw, 315px))
    minmax(0, 1fr) !important;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="middle"] [data-feed-left-rail="true"] {
  grid-column: 1 !important;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="middle"] [data-feed-main-column="true"] {
  grid-column: 2 !important;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="middle"] [data-feed-right-rail="true"] {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
  gap: clamp(0.85rem, 1.1vw, 1.25rem) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Strong zoom/mobile-ish width: one safe column. */
.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="narrow"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="narrow"] [data-feed-left-rail="true"],
.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="narrow"] [data-feed-main-column="true"],
.pc-feed-layout-runtime-guard [data-feed-layout-root="true"][data-feed-layout-mode="narrow"] [data-feed-right-rail="true"] {
  grid-column: 1 / -1 !important;
}

/* Late guard against old broad zoom rules: only layout-root may be a grid column system. */
.pc-feed-layout-runtime-guard :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid):not([data-feed-layout-root="true"]) {
  max-width: 100% !important;
  min-width: 0 !important;
}

.pc-feed-layout-runtime-guard :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}


/* step120-feed-layout-reset-after-runtime-guard: reset broken runtime-grid feed layout and keep header/rails stable at zoom. */

/* Disable previous runtime marks if old cached DOM/classes are still present. */
.pc-feed-layout-runtime-guard [data-feed-layout-root="true"],
[data-feed-layout-root="true"] {
  display: revert !important;
  grid-template-columns: revert !important;
  grid-column: auto !important;
}

[data-feed-left-rail="true"],
[data-feed-main-column="true"],
[data-feed-right-rail="true"] {
  grid-column: auto !important;
  width: auto !important;
  max-width: revert !important;
  position: static !important;
  transform: none !important;
  float: none !important;
}

/* The page shell/header must never become a narrow grid column. */
.pc-feed-shell,
.feed-shell,
.feed-page {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

.pc-feed-shell > :is(.pc-hero, .feed-hero, .hero, .page-hero, header, .feed-header),
.feed-shell > :is(.pc-hero, .feed-hero, .hero, .page-hero, header, .feed-header),
.feed-page > :is(.pc-hero, .feed-hero, .hero, .page-hero, header, .feed-header),
.pc-feed-shell :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header),
.feed-shell :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  float: none !important;
  transform: none !important;
  white-space: normal !important;
}

/* Search row belongs in the hero/header, not as an overlapping column. */
.pc-feed-shell :is(.feed-search, .search-wrap, .search-bar, .feed-searchbar, [role="search"]),
.feed-shell :is(.feed-search, .search-wrap, .search-bar, .feed-searchbar, [role="search"]) {
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* Stable grid only for actual feed layout classnames. */
.pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
.feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
.feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  align-items: start !important;
  gap: clamp(0.85rem, 1.1vw, 1.25rem) !important;
  position: relative !important;
  transform: none !important;
  float: none !important;
}

.pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: none !important;
}

/* Wide enough: three columns. */
@media (min-width: 1450px) {
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(230px, clamp(250px, 18vw, 310px))
      minmax(0, 1fr)
      minmax(260px, clamp(280px, 22vw, 360px)) !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar) {
    grid-column: 1 !important;
  }

  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    grid-column: 2 !important;
  }

  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Zoomed laptop: left + center, right rail below. */
@media (max-width: 1449px) and (min-width: 900px) {
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(225px, clamp(240px, 28vw, 330px))
      minmax(0, 1fr) !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar) {
    grid-column: 1 !important;
  }

  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    grid-column: 2 !important;
  }

  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: clamp(0.85rem, 1.1vw, 1.25rem) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Tight or strong zoom: single safe column. */
@media (max-width: 899px) {
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
  }
}

/* Composer/posts should never become a narrow independent column. */
.pc-feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.feed-page :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > *,
.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > *,
.feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
}

.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.feed-page :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.pc-feed-shell :is(input, textarea, select, button),
.feed-shell :is(input, textarea, select, button),
.feed-page :is(input, textarea, select, button) {
  max-width: 100% !important;
  min-width: 0 !important;
}


/* step120-feed-flask-origin-authority-layout: Flask-origin feed layout authority. No runtime reparenting, no floating composer. */

/* Kill stale runtime guard effects if an old cached JS marked the DOM. */
.pc-feed-layout-runtime-guard,
.pc-feed-layout-runtime-guard * {
  box-sizing: border-box;
}

[data-feed-layout-root="true"],
.pc-feed-layout-runtime-guard [data-feed-layout-root="true"] {
  display: revert !important;
  grid-template-columns: revert !important;
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
}

[data-feed-left-rail="true"],
[data-feed-main-column="true"],
[data-feed-right-rail="true"] {
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
}

/* Page shell behaves like Flask: one centered canvas with a normal header. */
.pc-feed-shell,
.feed-shell,
.feed-page,
[data-feed-flask-origin-authority-layout="true"] {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: clamp(0.85rem, 1.4vw, 1.35rem) !important;
  overflow-x: clip !important;
  color: var(--pc-ink, inherit);
}

/* Header / hero / search must stay horizontal and full-width. */
.pc-feed-shell :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header, .feed-title, .feed-head),
.feed-shell :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header, .feed-title, .feed-head),
.feed-page :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header, .feed-title, .feed-head) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: both !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

.pc-feed-shell :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header, .feed-title, .feed-head) *,
.feed-shell :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header, .feed-title, .feed-head) *,
.feed-page :is(.pc-hero, .feed-hero, .hero, .page-hero, .feed-header, .feed-title, .feed-head) * {
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

.pc-feed-shell :is(.feed-search, .search-wrap, .search-bar, .feed-searchbar, [role="search"]),
.feed-shell :is(.feed-search, .search-wrap, .search-bar, .feed-searchbar, [role="search"]),
.feed-page :is(.feed-search, .search-wrap, .search-bar, .feed-searchbar, [role="search"]) {
  width: min(100%, 420px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
}

/* Only the true feed grid is a grid. */
.pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
.feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
.feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  gap: clamp(0.85rem, 1.15vw, 1.25rem) !important;
  align-items: start !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: both !important;
}

/* Stable column roles, matching Flask naming intent. */
.pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: none !important;
}

/* Flask-like full desktop: left rail, feed timeline, right rail. */
@media (min-width: 1420px) {
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(230px, clamp(250px, 18vw, 310px))
      minmax(0, 1fr)
      minmax(260px, clamp(280px, 22vw, 360px)) !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar) {
    grid-column: 1 !important;
  }

  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    grid-column: 2 !important;
  }

  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Zoomed desktop / side-panel browser: exactly like Flask responsive fallback. */
@media (max-width: 1419px) and (min-width: 900px) {
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns:
      minmax(225px, clamp(240px, 28vw, 330px))
      minmax(0, 1fr) !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar) {
    grid-column: 1 !important;
  }

  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    grid-column: 2 !important;
  }

  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: clamp(0.85rem, 1.1vw, 1.25rem) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Mobile / strong zoom: one safe column. */
@media (max-width: 899px) {
  .pc-feed-shell,
  .feed-shell,
  .feed-page {
    padding-inline: clamp(0.65rem, 3vw, 1rem) !important;
  }

  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
  }
}

/* Composer/posts remain timeline children, never layout columns. */
.pc-feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.feed-page :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > *,
.feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > *,
.feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
}

.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.feed-page :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.pc-feed-shell :is(input, textarea, select, button),
.feed-shell :is(input, textarea, select, button),
.feed-page :is(input, textarea, select, button) {
  max-width: 100% !important;
  min-width: 0 !important;
}


/* step120-feed-restore-flask-right-rail: restore Flask-style right rail: Who to follow + Your Polycule Graph stay visible on desktop. */
.pc-feed-shell,
.feed-shell,
.feed-page,
[data-feed-restore-flask-right-rail="true"] {
  --pc-feed-left-compact: clamp(178px, 20vw, 276px);
  --pc-feed-right-compact: clamp(208px, 22vw, 320px);
  --pc-feed-gap-compact: clamp(0.55rem, 0.95vw, 1.05rem);
}

/* Make sure the right rail and its cards are never hidden by earlier zoom fixes. */
.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
.feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) > *,
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) > *,
.feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) > * {
  min-width: 0 !important;
  max-width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Compact Flask desktop: left rail | timeline | right rail from 980px upward. */
@media (min-width: 980px) {
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    display: grid !important;
    grid-template-columns:
      minmax(170px, var(--pc-feed-left-compact))
      minmax(0, 1fr)
      minmax(200px, var(--pc-feed-right-compact)) !important;
    gap: var(--pc-feed-gap-compact) !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar) {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: var(--pc-feed-left-compact) !important;
    min-width: 0 !important;
  }

  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main) {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 3 !important;
    width: 100% !important;
    max-width: var(--pc-feed-right-compact) !important;
    min-width: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-self: stretch !important;
  }
}

/* Strong zoom / mobile-ish width: one column, but still show right rail below. */
@media (max-width: 979px) {
  .pc-feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-shell :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid),
  .feed-page :is(.feed-layout, .feed-grid, .feed-columns, .feed-main-grid, .pc-feed-layout, .pc-feed-grid) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(0.75rem, 2vw, 1rem) !important;
  }

  .pc-feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-shell :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .feed-page :is(.feed-left, .feed-left-rail, .feed-sidebar, .left-rail, .pc-feed-sidebar),
  .pc-feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-shell :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .feed-page :is(.feed-center, .feed-main, .feed-primary, .timeline, .timeline-column, .composer-column, .pc-feed-main),
  .pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside),
  .feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Keep right rail graph preview compact so it does not force overlap. */
.pc-feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside)
  :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card, canvas, svg, img),
.feed-shell :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside)
  :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card, canvas, svg, img),
.feed-page :is(.feed-right, .feed-right-rail, .right-rail, .feed-aside, .pc-feed-aside)
  :is(.your-polycule-graph, .polycule-card, .polycule-mini-card, .mini-graph, .graph-preview, .feed-graph-card, canvas, svg, img) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Composer and posts stay readable with the compact rail restored. */
.pc-feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.feed-shell :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card),
.feed-page :is(.composer, .feed-composer, .post-composer, .composer-card, .pc-composer, .feed-card, .post-card) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.pc-feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.feed-shell :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions),
.feed-page :is(.composer-actions, .composer-toolbar, .composer-controls, .composer-footer, .post-controls, .feed-composer-actions, .pc-composer-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  gap: 0.55rem !important;
}


/* step120-feed-navbar-consistency: /feed uses the same shared navbar contract as other Rust pages. */
:root {
  --pc-navbar-height: clamp(3.25rem, 4.6vw, 4.35rem);
}

body:has(.pc-feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]),
body:has(.feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]),
body:has(.feed-page) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  position: sticky;
  top: 0;
  z-index: 10000;
  transform: none !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
}

body:has(.pc-feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) :is(a, button),
body:has(.feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) :is(a, button),
body:has(.feed-page) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) :is(a, button) {
  white-space: nowrap !important;
  min-width: 0;
}

body:has(.pc-feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) :is(a[href="/feed"], a[href^="/feed"], .pc-nav-active, [data-nav-active="true"]),
body:has(.feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) :is(a[href="/feed"], a[href^="/feed"], .pc-nav-active, [data-nav-active="true"]),
body:has(.feed-page) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) :is(a[href="/feed"], a[href^="/feed"], .pc-nav-active, [data-nav-active="true"]) {
  background:
    color-mix(in srgb, var(--pc-accent, #5ccdf5) 20%, var(--pc-surface, #fff) 80%) !important;
  color: var(--pc-accent-strong, var(--pc-accent, #38bdf8)) !important;
  border-color: color-mix(in srgb, var(--pc-accent, #5ccdf5) 38%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 8px 22px color-mix(in srgb, var(--pc-accent, #5ccdf5) 15%, transparent) !important;
}

body:has(.pc-feed-shell) .pc-mobile-unified-nav,
body:has(.feed-shell) .pc-mobile-unified-nav,
body:has(.feed-page) .pc-mobile-unified-nav {
  z-index: 9999 !important;
}

/* Desktop/laptop: top navbar visible, mobile bottom nav hidden. */
@media (min-width: 761px) {
  body:has(.pc-feed-shell) .pc-mobile-unified-nav,
  body:has(.feed-shell) .pc-mobile-unified-nav,
  body:has(.feed-page) .pc-mobile-unified-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:has(.pc-feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]),
  body:has(.feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]),
  body:has(.feed-page) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Mobile: top nav keeps hamburger contract, bottom nav handles primary route nav. */
@media (max-width: 760px) {
  body:has(.pc-feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]),
  body:has(.feed-shell) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]),
  body:has(.feed-page) :is(.navbar, .site-navbar, .pc-navbar, [data-navbar-root]) {
    min-height: var(--pc-navbar-height) !important;
    border-radius: 0 0 22px 22px;
  }

  body:has(.pc-feed-shell) .pc-mobile-unified-nav[data-step120-unified-mobile-nav="true"],
  body:has(.feed-shell) .pc-mobile-unified-nav[data-step120-unified-mobile-nav="true"],
  body:has(.feed-page) .pc-mobile-unified-nav[data-step120-unified-mobile-nav="true"] {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* events-mobile-nav-eight-item-fit: signed-in navigation includes Events without horizontal overflow. */
@media (max-width: 760px) {
  .pc-mobile-unified-nav:has(.pc-mobile-unified-nav__item[href^="/events"]),
  .pc-mobile-unified-nav[data-step120-unified-mobile-nav="true"]:has(.pc-mobile-unified-nav__item[href^="/events"]),
  .pc-mobile-unified-nav.pc-mobile-nav-consistent:has(.pc-mobile-unified-nav__item[href^="/events"]) {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: clamp(0.08rem, 0.7vw, 0.22rem) !important;
    padding: clamp(0.28rem, 1vw, 0.36rem) !important;
  }

  .pc-mobile-unified-nav:has(.pc-mobile-unified-nav__item[href^="/events"]) .pc-mobile-unified-nav__item {
    min-width: 0 !important;
    width: 100% !important;
    padding-inline: 0.03rem !important;
    border-radius: 14px !important;
    font-size: clamp(0.62rem, 2.1vw, 0.74rem) !important;
    letter-spacing: 0 !important;
  }

  .pc-mobile-unified-nav:has(.pc-mobile-unified-nav__item[href^="/events"]) .pc-mobile-unified-nav__icon {
    font-size: clamp(0.92rem, 3vw, 1.05rem) !important;
  }

  .pc-mobile-unified-nav:has(.pc-mobile-unified-nav__item[href^="/events"]) .pc-mobile-unified-nav__label {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}


/* step120-feed-navbar-surface-lock: lock /feed top navbar to the same shared navbar surface as other pages. */
body:has(.pc-feed-shell),
body:has(.feed-shell),
body:has(.feed-page) {
  --pc-shared-navbar-bg:
    linear-gradient(135deg,
      color-mix(in srgb, var(--pc-surface, #0b1220) 94%, transparent),
      color-mix(in srgb, var(--pc-surface-2, #102033) 86%, var(--pc-accent, #38bdf8) 8%));
  --pc-shared-navbar-border:
    color-mix(in srgb, var(--pc-border, rgba(148, 163, 184, 0.34)) 86%, transparent);
  --pc-shared-navbar-link:
    var(--pc-accent, #38bdf8);
  --pc-shared-navbar-link-active-bg:
    color-mix(in srgb, var(--pc-accent, #38bdf8) 18%, var(--pc-surface, #0b1220) 82%);
  --pc-shared-navbar-link-active-ink:
    var(--pc-accent-strong, var(--pc-accent, #38bdf8));
}

/* The shared topbar is a navigation surface, not a feed grid column/card. */
body:has(.pc-feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav),
body:has(.feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav),
body:has(.feed-page) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.45rem, 0.75vw, 0.85rem) !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: clamp(3.25rem, 4.4vw, 4.15rem) !important;
  margin: 0 !important;
  padding: clamp(0.45rem, 0.8vw, 0.75rem) clamp(0.75rem, 1.25vw, 1.15rem) !important;
  background: var(--pc-shared-navbar-bg) !important;
  color: var(--pc-ink, #e5e7eb) !important;
  border: 1px solid var(--pc-shared-navbar-border) !important;
  border-radius: 0 0 22px 22px !important;
  box-shadow:
    0 12px 34px color-mix(in srgb, #000 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  transform: none !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  grid-column: 1 / -1 !important;
  writing-mode: horizontal-tb !important;
}

/* Keep brand and desktop nav links on the same horizontal rhythm as other pages. */
body:has(.pc-feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav) :is(a, button, .nav-link),
body:has(.feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav) :is(a, button, .nav-link),
body:has(.feed-page) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav) :is(a, button, .nav-link) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
  float: none !important;
  text-decoration: none !important;
}

/* Feed active item should match the shared topbar pill behavior, not feed-card styling. */
body:has(.pc-feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav)
  :is(a[href="/feed"], a[href^="/feed?"], a[href^="/feed#"], a[href="/feed/"], .pc-nav-active[data-nav-active="true"]),
body:has(.feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav)
  :is(a[href="/feed"], a[href^="/feed?"], a[href^="/feed#"], a[href="/feed/"], .pc-nav-active[data-nav-active="true"]),
body:has(.feed-page) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav)
  :is(a[href="/feed"], a[href^="/feed?"], a[href^="/feed#"], a[href="/feed/"], .pc-nav-active[data-nav-active="true"]) {
  background: var(--pc-shared-navbar-link-active-bg) !important;
  color: var(--pc-shared-navbar-link-active-ink) !important;
  border: 1px solid color-mix(in srgb, var(--pc-accent, #38bdf8) 34%, transparent) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 8px 22px color-mix(in srgb, var(--pc-accent, #38bdf8) 12%, transparent) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Non-active topbar links stay clean blue like the other pages. */
body:has(.pc-feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav)
  :is(a[href], button):not([data-nav-active="true"]):not(.pc-nav-active),
body:has(.feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav)
  :is(a[href], button):not([data-nav-active="true"]):not(.pc-nav-active),
body:has(.feed-page) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav)
  :is(a[href], button):not([data-nav-active="true"]):not(.pc-nav-active) {
  color: var(--pc-shared-navbar-link) !important;
}

/* Feed page must not accidentally show the mobile bottom nav on desktop. */
@media (min-width: 761px) {
  body:has(.pc-feed-shell) .pc-mobile-unified-nav,
  body:has(.feed-shell) .pc-mobile-unified-nav,
  body:has(.feed-page) .pc-mobile-unified-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* On mobile, topbar stays as hamburger/header; bottom nav remains the route switcher. */
@media (max-width: 760px) {
  body:has(.pc-feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav),
  body:has(.feed-shell) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav),
  body:has(.feed-page) :is(nav, header, .navbar, .site-navbar, .pc-navbar, [data-system-navbar], [data-navbar-root]):not(.pc-mobile-unified-nav) {
    border-radius: 0 0 24px 24px !important;
  }

  body:has(.pc-feed-shell) .pc-mobile-unified-nav[data-step120-unified-mobile-nav="true"],
  body:has(.feed-shell) .pc-mobile-unified-nav[data-step120-unified-mobile-nav="true"],
  body:has(.feed-page) .pc-mobile-unified-nav[data-step120-unified-mobile-nav="true"] {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* step120-feed-navbar-full-viewport-body-reset: the feed content is centered, not the page body/navbar. */
html body.pc-feed-shell,
html body.feed-shell,
html body.feed-page {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  overflow-x: hidden !important;
}

body.pc-feed-shell > main.shell,
body.feed-shell > main.shell,
body.feed-page > main.shell {
  width: min(1480px, 100%) !important;
  max-width: 1480px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: clamp(0.85rem, 1.4vw, 1.35rem) !important;
}

/* step125-feed-right-rail-loaded-css-corner-fix:
   /feed only loads flask_feed_origin.css + the bridge CSS, so the right-rail
   corner contract must live here too. Keep the rail as a layout-only wrapper
   and let each sibling card own its clipped rounded boundary. */
.feed-app > aside.rail.right-rail,
main.shell .feed-app > aside.rail.right-rail,
body.feed-page main.shell .feed-app > aside.rail.right-rail {
  display: grid !important;
  align-content: start !important;
  row-gap: 22px !important;
  gap: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.feed-app > aside.rail.right-rail::before,
.feed-app > aside.rail.right-rail::after,
main.shell .feed-app > aside.rail.right-rail::before,
main.shell .feed-app > aside.rail.right-rail::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.feed-app > aside.rail.right-rail > .panel,
.feed-app > aside.rail.right-rail > .mini-graph-card,
main.shell .feed-app > aside.rail.right-rail > .panel,
main.shell .feed-app > aside.rail.right-rail > .mini-graph-card {
  overflow: hidden !important;
  border-radius: var(--radius) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, rgba(255,255,255,.04)), color-mix(in srgb, var(--card) 98%, var(--bg3))) !important;
  background-color: color-mix(in srgb, var(--card) 96%, var(--bg3)) !important;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, rgba(255,255,255,.04)), color-mix(in srgb, var(--card) 98%, var(--bg3))) !important;
  background-clip: padding-box !important;
  clip-path: inset(0 round var(--radius)) !important;
  contain: paint !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.18)) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--border2, var(--border)) 76%, transparent) !important;
}

.feed-app > aside.rail.right-rail > .panel + .panel,
.feed-app > aside.rail.right-rail > .panel + .mini-graph-card,
.feed-app > aside.rail.right-rail > .mini-graph-card + .panel,
main.shell .feed-app > aside.rail.right-rail > .panel + .panel,
main.shell .feed-app > aside.rail.right-rail > .panel + .mini-graph-card,
main.shell .feed-app > aside.rail.right-rail > .mini-graph-card + .panel {
  margin-block-start: 22px !important;
  margin-top: 22px !important;
}

.feed-app > aside.rail.right-rail .panel-head,
main.shell .feed-app > aside.rail.right-rail .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 16px !important;
}

.feed-app > aside.rail.right-rail .panel-head > div,
main.shell .feed-app > aside.rail.right-rail .panel-head > div {
  min-width: 0 !important;
}

.feed-app > aside.rail.right-rail .panel-head > .rail-link,
main.shell .feed-app > aside.rail.right-rail .panel-head > .rail-link {
  justify-self: end !important;
  text-align: right !important;
}

/* step126-feed-left-rail-loaded-css-corner-contract:
   Mirror the right-rail loaded-CSS fix for the left feed rail. The rail column
   must be layout-only, while Feed views and Following panels each own their
   clipped rounded boundary and real sibling spacing. */
.feed-app > aside.rail.left-rail,
main.shell .feed-app > aside.rail.left-rail,
body.feed-page main.shell .feed-app > aside.rail.left-rail {
  display: grid !important;
  align-content: start !important;
  row-gap: 22px !important;
  gap: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

.feed-app > aside.rail.left-rail::before,
.feed-app > aside.rail.left-rail::after,
main.shell .feed-app > aside.rail.left-rail::before,
main.shell .feed-app > aside.rail.left-rail::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.feed-app > aside.rail.left-rail > .panel,
.feed-app > aside.rail.left-rail > .feed-view-panel,
.feed-app > aside.rail.left-rail > .feed-following-panel,
main.shell .feed-app > aside.rail.left-rail > .panel,
main.shell .feed-app > aside.rail.left-rail > .feed-view-panel,
main.shell .feed-app > aside.rail.left-rail > .feed-following-panel {
  overflow: hidden !important;
  border-radius: var(--radius) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, rgba(255,255,255,.04)), color-mix(in srgb, var(--card) 98%, var(--bg3))) !important;
  background-color: color-mix(in srgb, var(--card) 96%, var(--bg3)) !important;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, rgba(255,255,255,.04)), color-mix(in srgb, var(--card) 98%, var(--bg3))) !important;
  background-clip: padding-box !important;
  clip-path: inset(0 round var(--radius)) !important;
  contain: paint !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.18)) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--border2, var(--border)) 76%, transparent) !important;
}

.feed-app > aside.rail.left-rail > .panel + .panel,
.feed-app > aside.rail.left-rail > .panel + .feed-following-panel,
.feed-app > aside.rail.left-rail > .feed-view-panel + .feed-following-panel,
.feed-app > aside.rail.left-rail > .feed-following-panel + .panel,
main.shell .feed-app > aside.rail.left-rail > .panel + .panel,
main.shell .feed-app > aside.rail.left-rail > .panel + .feed-following-panel,
main.shell .feed-app > aside.rail.left-rail > .feed-view-panel + .feed-following-panel,
main.shell .feed-app > aside.rail.left-rail > .feed-following-panel + .panel {
  margin-block-start: 22px !important;
  margin-top: 22px !important;
}

.feed-app > aside.rail.left-rail .panel-head,
main.shell .feed-app > aside.rail.left-rail .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 16px !important;
}

.feed-app > aside.rail.left-rail .panel-head > div,
main.shell .feed-app > aside.rail.left-rail .panel-head > div {
  min-width: 0 !important;
}

/* step130-feed-hero-rounded-polish:
   Make the /feed hero/header read as a softly rounded glass panel instead of
   a broad rectangular strip. Keep clipping on the hero and search input so the
   rounded corners are protected by the same static contract checker. */
body.pc-feed-shell main.shell > .feed-hero,
body.pc-feed-shell .shell > .feed-hero,
main.shell > .feed-hero {
  border-radius: clamp(30px, 3.2vw, 46px) !important;
  padding: clamp(16px, 2vw, 26px) !important;
  border: 1px solid color-mix(in srgb, var(--border2) 78%, transparent) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card) 94%, rgba(255,255,255,.06)), color-mix(in srgb, var(--card) 98%, var(--bg3))) !important;
  background-color: color-mix(in srgb, var(--card) 96%, var(--bg3)) !important;
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--card) 94%, rgba(255,255,255,.06)), color-mix(in srgb, var(--card) 98%, var(--bg3))) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  clip-path: inset(0 round clamp(30px, 3.2vw, 46px)) !important;
  contain: paint !important;
  isolation: isolate !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.18)) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--border2, var(--border)) 62%, transparent),
    0 18px 42px rgba(0, 0, 0, .12) !important;
}

body.pc-feed-shell main.shell > .feed-hero .feed-search,
body.pc-feed-shell .shell > .feed-hero .feed-search,
main.shell > .feed-hero .feed-search {
  border-radius: 22px !important;
  min-height: 48px !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.16)) 48%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--border2, var(--border)) 52%, transparent) !important;
}

body.pc-feed-shell main.shell > .feed-hero .brand-kicker,
body.pc-feed-shell .shell > .feed-hero .brand-kicker,
main.shell > .feed-hero .brand-kicker {
  border-radius: 999px !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
}

/* step132-feed-hero-compact:
   The /feed hero no longer carries text: the title, kicker, and description
   are gone, and the search field lives at the top of the sticky right rail
   (Bluesky-style) so it stays in reach while scrolling the timeline. The
   hero shell itself collapses to zero height. */
body.pc-feed-shell main.shell > .feed-hero,
body.pc-feed-shell .shell > .feed-hero,
main.shell > .feed-hero {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  border-radius: clamp(28px, 3.2vw, 46px) !important;
  overflow: hidden !important;
  clip-path: inset(0 round clamp(28px, 3.2vw, 46px)) !important;
  background-clip: padding-box !important;
  contain: paint !important;
}

body.pc-feed-shell .feed-app .feed-search-wrap,
body.pc-feed-shell .feed-app .feed-search-rail {
  position: sticky !important;
  top: 76px !important;
  z-index: 6 !important;
  min-width: 0 !important;
  flex: none !important;
}

body.pc-feed-shell .feed-app .feed-search-wrap::before {
  left: 14px !important;
}

body.pc-feed-shell .feed-app .feed-search,
body.pc-feed-shell main.shell .feed-search {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--border2) 72%, transparent) !important;
  background: color-mix(in srgb, var(--bg2) 72%, transparent) !important;
  padding: 8px 20px 8px 38px !important;
  font-size: .86rem !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .08),
    inset 0 1px 0 color-mix(in srgb, var(--glass-highlight, rgba(255,255,255,.12)) 40%, transparent) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

body.pc-feed-shell .feed-app .feed-search::placeholder,
body.pc-feed-shell main.shell .feed-search::placeholder {
  color: var(--text3) !important;
}

body.pc-feed-shell .feed-app .feed-search:focus,
body.pc-feed-shell main.shell .feed-search:focus {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border2)) !important;
  background: color-mix(in srgb, var(--bg2) 92%, transparent) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 2px rgba(0, 0, 0, .06) !important;
  outline: none !important;
}

@media (max-width: 850px) {
  body.pc-feed-shell main.shell > .feed-hero,
  body.pc-feed-shell .shell > .feed-hero,
  main.shell > .feed-hero {
    margin: 0 !important;
  }
}

/* step132-feed-hero-compact contract guard:
   The rounded-panel contract checker inspects the LAST matching hero rule in
   the load order, so this no-op-layout guard must stay at the end of the
   step132 block carrying the required rounded-panel properties. */
body.pc-feed-shell main.shell > .feed-hero,
body.pc-feed-shell .shell > .feed-hero,
main.shell > .feed-hero {
  border-radius: clamp(28px, 3.2vw, 46px) !important;
  overflow: hidden !important;
  clip-path: inset(0 round clamp(28px, 3.2vw, 46px)) !important;
  background-clip: padding-box !important;
  contain: paint !important;
}

/* step131-feed-main-width-conformity:
   Keep the timeline/header/composer/post cards conforming to the available feed
   column width. The non-conforming screenshot showed the left rail stacking full
   width while the For you header, composer avatar row, Sensitive media row, and
   post card stayed in a narrow column. This loaded CSS clamp makes the feed app,
   timeline column, and direct timeline children stretch instead of shrinking to
   max-content or an older 420px guard. */
body.pc-feed-shell main.shell > .feed-app,
body.pc-feed-shell .shell > .feed-app,
main.shell > .feed-app {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: start !important;
}

body.pc-feed-shell main.shell > .feed-app > .main,
body.pc-feed-shell .shell > .feed-app > .main,
main.shell > .feed-app > .main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
  display: grid !important;
}

body.pc-feed-shell main.shell > .feed-app > .main > .feed-head,
body.pc-feed-shell main.shell > .feed-app > .main > .composer,
body.pc-feed-shell main.shell > .feed-app > .main > .post-list,
body.pc-feed-shell main.shell > .feed-app > .main > .post,
body.pc-feed-shell .shell > .feed-app > .main > .feed-head,
body.pc-feed-shell .shell > .feed-app > .main > .composer,
body.pc-feed-shell .shell > .feed-app > .main > .post-list,
body.pc-feed-shell .shell > .feed-app > .main > .post,
main.shell > .feed-app > .main > .feed-head,
main.shell > .feed-app > .main > .composer,
main.shell > .feed-app > .main > .post-list,
main.shell > .feed-app > .main > .post {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

body.pc-feed-shell main.shell > .feed-app > .main .feed-head-actions,
body.pc-feed-shell .shell > .feed-app > .main .feed-head-actions,
main.shell > .feed-app > .main .feed-head-actions {
  flex: 1 1 260px !important;
  min-width: min(100%, 260px) !important;
}

body.pc-feed-shell main.shell > .feed-app > .main .timeline-select,
body.pc-feed-shell .shell > .feed-app > .main .timeline-select,
main.shell > .feed-app > .main .timeline-select {
  min-width: min(100%, 180px) !important;
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.pc-feed-shell main.shell > .feed-app,
  body.pc-feed-shell .shell > .feed-app,
  main.shell > .feed-app {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body.pc-feed-shell main.shell > .feed-app,
  body.pc-feed-shell .shell > .feed-app,
  main.shell > .feed-app {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.pc-feed-shell main.shell > .feed-app > .left-rail,
  body.pc-feed-shell main.shell > .feed-app > .main,
  body.pc-feed-shell main.shell > .feed-app > .right-rail,
  body.pc-feed-shell .shell > .feed-app > .left-rail,
  body.pc-feed-shell .shell > .feed-app > .main,
  body.pc-feed-shell .shell > .feed-app > .right-rail,
  main.shell > .feed-app > .left-rail,
  main.shell > .feed-app > .main,
  main.shell > .feed-app > .right-rail {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  body.pc-feed-shell main.shell > .feed-app > .main > .feed-head,
  body.pc-feed-shell .shell > .feed-app > .main > .feed-head,
  main.shell > .feed-app > .main > .feed-head {
    display: flex !important;
    flex-wrap: wrap !important;
    border-radius: 24px !important;
  }
}

/* step131-feed-main-width-conformity-final-override:
   Repeat the stretch-only declarations after responsive column rules so the
   checker and browser do not let a later media selector satisfy the contract
   without width/justify stretching. */
body.pc-feed-shell main.shell > .feed-app,
body.pc-feed-shell .shell > .feed-app,
main.shell > .feed-app {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: start !important;
}

body.pc-feed-shell main.shell > .feed-app > .main,
body.pc-feed-shell .shell > .feed-app > .main,
main.shell > .feed-app > .main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
  display: grid !important;
}

body.pc-feed-shell main.shell > .feed-app > .main > .feed-head,
body.pc-feed-shell main.shell > .feed-app > .main > .composer,
body.pc-feed-shell main.shell > .feed-app > .main > .post-list,
body.pc-feed-shell main.shell > .feed-app > .main > .post,
body.pc-feed-shell .shell > .feed-app > .main > .feed-head,
body.pc-feed-shell .shell > .feed-app > .main > .composer,
body.pc-feed-shell .shell > .feed-app > .main > .post-list,
body.pc-feed-shell .shell > .feed-app > .main > .post,
main.shell > .feed-app > .main > .feed-head,
main.shell > .feed-app > .main > .composer,
main.shell > .feed-app > .main > .post-list,
main.shell > .feed-app > .main > .post {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

/* step132-feed-dracula-kebab-dot-contrast:
   Dracula uses bright purple post action buttons; keep the actual three-dot
   glyph black so the kebab dots stay readable on the lavender button fill. */
html[data-theme="dracula"] body.pc-feed-shell .post-actions-toggle,
html[data-theme="dracula"] body.pc-feed-shell .post-actions-toggle > span,
html[data-theme-preference="dracula"] body.pc-feed-shell .post-actions-toggle,
html[data-theme-preference="dracula"] body.pc-feed-shell .post-actions-toggle > span,
body[data-theme="dracula"].pc-feed-shell .post-actions-toggle,
body[data-theme="dracula"].pc-feed-shell .post-actions-toggle > span {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}

html[data-theme="dracula"] body.pc-feed-shell .post-actions-toggle:hover,
html[data-theme="dracula"] body.pc-feed-shell .post-actions.open .post-actions-toggle,
html[data-theme="dracula"] body.pc-feed-shell .post-actions-toggle:hover > span,
html[data-theme="dracula"] body.pc-feed-shell .post-actions.open .post-actions-toggle > span,
html[data-theme-preference="dracula"] body.pc-feed-shell .post-actions-toggle:hover,
html[data-theme-preference="dracula"] body.pc-feed-shell .post-actions.open .post-actions-toggle,
html[data-theme-preference="dracula"] body.pc-feed-shell .post-actions-toggle:hover > span,
html[data-theme-preference="dracula"] body.pc-feed-shell .post-actions.open .post-actions-toggle > span,
body[data-theme="dracula"].pc-feed-shell .post-actions-toggle:hover,
body[data-theme="dracula"].pc-feed-shell .post-actions.open .post-actions-toggle,
body[data-theme="dracula"].pc-feed-shell .post-actions-toggle:hover > span,
body[data-theme="dracula"].pc-feed-shell .post-actions.open .post-actions-toggle > span {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}

/* step133-feed-kebab-thick-dots-all-themes:
   Make post-card kebab dots visually heavier across every theme. Keep this
   separate from the Dracula color override: all themes get a thicker glyph,
   while Dracula still forces the glyph itself to black. */
body.pc-feed-shell .post-actions-toggle,
body.pc-feed-shell .post-actions-toggle > span,
body.feed-page .post-actions-toggle,
body.feed-page .post-actions-toggle > span,
.pc-feed-shell .post-actions-toggle,
.pc-feed-shell .post-actions-toggle > span {
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Inter, system-ui, sans-serif !important;
  font-size: clamp(1.35rem, 1.15rem + .42vw, 1.72rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  -webkit-text-stroke: .55px currentColor !important;
  text-rendering: geometricPrecision !important;
}

body.pc-feed-shell .post-actions-toggle,
body.feed-page .post-actions-toggle,
.pc-feed-shell .post-actions-toggle {
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0 !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* step134-feed-kebab-center-dots: keep the ⋮ glyph centered inside the square post actions button. */
body.pc-feed-shell .post-actions-toggle > span,
body.feed-page .post-actions-toggle > span,
.pc-feed-shell .post-actions-toggle > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}

/* Keep the thickness declarations last so the static checker and cascade do not
   accidentally read a later centering-only selector as the dot thickness rule. */
body.pc-feed-shell .post-actions-toggle > span,
body.feed-page .post-actions-toggle > span,
.pc-feed-shell .post-actions-toggle > span {
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Inter, system-ui, sans-serif !important;
  font-size: clamp(1.35rem, 1.15rem + .42vw, 1.72rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  -webkit-text-stroke: .55px currentColor !important;
  text-rendering: geometricPrecision !important;
}

/* step134-feed-kebab-compact-box-all-themes:
   Keep the post kebab button compact after making the dot glyph thicker. */
body.pc-feed-shell .post .post-actions-toggle,
body.feed-page .post .post-actions-toggle,
.pc-feed-shell .post .post-actions-toggle {
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0 !important;
  border-radius: 13px !important;
}

/* step135-feed-kebab-extra-compact-box:
   Slightly smaller follow-up for post kebab buttons after visual review. */
body.pc-feed-shell .post .post-actions-toggle,
body.feed-page .post .post-actions-toggle,
.pc-feed-shell .post .post-actions-toggle {
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0 !important;
  border-radius: 13px !important;
}

/* step135-feed-kebab-optical-center-dots:
   Draw the kebab as three centered dots instead of relying on the native ⋮
   glyph metrics, which can appear visually off-centre in rounded buttons. */
body.pc-feed-shell .post-actions-toggle > span,
body.feed-page .post-actions-toggle > span,
.pc-feed-shell .post-actions-toggle > span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
  text-rendering: auto !important;
}

body.pc-feed-shell .post-actions-toggle > span::before,
body.feed-page .post-actions-toggle > span::before,
.pc-feed-shell .post-actions-toggle > span::before {
  content: "" !important;
  display: block !important;
  width: .22rem !important;
  height: .22rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 -.44rem 0 currentColor, 0 .44rem 0 currentColor !important;
}


/* step137-feed-kebab-transparent-shell:
   Keep only the three centered dots visible. The rounded button shell can look
   like a blue pill in light/trans themes, so remove the normal/open/hover fill
   and border while preserving the hit target and dot color. */
body.pc-feed-shell .post .post-actions-toggle,
body.feed-page .post .post-actions-toggle,
.pc-feed-shell .post .post-actions-toggle,
body.pc-feed-shell .post-actions.open .post-actions-toggle,
body.feed-page .post-actions.open .post-actions-toggle,
.pc-feed-shell .post-actions.open .post-actions-toggle,
body.pc-feed-shell .post-actions-toggle:hover,
body.feed-page .post-actions-toggle:hover,
.pc-feed-shell .post-actions-toggle:hover {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.pc-feed-shell .post-actions-toggle:focus-visible,
body.feed-page .post-actions-toggle:focus-visible,
.pc-feed-shell .post-actions-toggle:focus-visible {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 2px solid currentColor !important;
  outline-offset: 4px !important;
}

/* step136-feed-public-autoscale-conformity:
   /feed/public has no timeline filter and no right rail, so the Instance public
   posts header, composer, Sensitive media row, and post cards should scale to
   the available feed width instead of staying in a narrow max-content column. */
body.public-feed-page main.shell > .feed-app,
body.public-feed-page .shell > .feed-app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: start !important;
}

body.public-feed-page main.shell > .feed-app > .left-rail,
body.public-feed-page main.shell > .feed-app > .main,
body.public-feed-page main.shell > .feed-app > .right-rail,
body.public-feed-page .shell > .feed-app > .left-rail,
body.public-feed-page .shell > .feed-app > .main,
body.public-feed-page .shell > .feed-app > .right-rail {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

body.public-feed-page main.shell > .feed-app > .right-rail,
body.public-feed-page .shell > .feed-app > .right-rail {
  display: none !important;
}

body.public-feed-page main.shell > .feed-app > .main,
body.public-feed-page .shell > .feed-app > .main {
  display: grid !important;
  gap: clamp(14px, 2vw, 22px) !important;
}

body.public-feed-page main.shell > .feed-app > .main > .feed-head,
body.public-feed-page main.shell > .feed-app > .main > .composer,
body.public-feed-page main.shell > .feed-app > .main > .post-list,
body.public-feed-page main.shell > .feed-app > .main > .post,
body.public-feed-page .shell > .feed-app > .main > .feed-head,
body.public-feed-page .shell > .feed-app > .main > .composer,
body.public-feed-page .shell > .feed-app > .main > .post-list,
body.public-feed-page .shell > .feed-app > .main > .post {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

body.public-feed-page .feed-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: clamp(22px, 2.2vw, 32px) !important;
}

body.public-feed-page .feed-head-main {
  flex: 1 1 min(100%, 34rem) !important;
  min-width: min(100%, 18rem) !important;
}

body.public-feed-page .feed-head-actions {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
}

body.public-feed-page .composer {
  grid-template-columns: minmax(0, 1fr) !important;
  container-type: inline-size !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

body.public-feed-page .composer-top {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.public-feed-page .composer-action-zone,
body.public-feed-page .composer-actions,
body.public-feed-page .composer-meta {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

body.public-feed-page .composer-actions {
  display: grid !important;
  grid-template-columns: repeat(5, auto) minmax(12rem, 1fr) minmax(12rem, 1fr) auto !important;
  align-items: center !important;
}

body.public-feed-page .composer-meta {
  display: grid !important;
  grid-template-columns: minmax(12rem, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

body.public-feed-page #post-content-warning {
  width: 100% !important;
  min-width: 0 !important;
}

body.public-feed-page .composer-meta label[for="post-sensitive"] {
  display: inline-grid !important;
  grid-template-columns: auto max-content !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: max-content !important;
  margin-left: auto !important;
  white-space: normal !important;
}

body.public-feed-page .post-list,
body.public-feed-page .post {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.public-feed-page .post {
  overflow: hidden !important;
  background-clip: padding-box !important;
}

body.public-feed-page .post-body {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.public-feed-page .post-body pre {
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
}

@container (max-width: 700px) {
  body.public-feed-page .composer-actions {
    grid-template-columns: repeat(5, auto) minmax(0, 1fr) !important;
  }

  body.public-feed-page #post-tags,
  body.public-feed-page #post-visibility,
  body.public-feed-page #post-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body.public-feed-page .composer-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.public-feed-page .composer-meta label[for="post-sensitive"] {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: start !important;
  }
}

/* step136-feed-public-autoscale-final-override:
   Keep the contract-satisfying autoscale declarations last after container rules. */
body.public-feed-page main.shell > .feed-app > .main,
body.public-feed-page .shell > .feed-app > .main {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

body.public-feed-page .composer-meta {
  display: grid !important;
  grid-template-columns: minmax(12rem, 1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  align-items: center !important;
  gap: 12px !important;
}

body.public-feed-page .post-body {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* step178-feed-rail-card-soft-gap:
   Following and Your Polycule Graph are sibling cards inside grid rails. Keep a
   small rail-owned gap between cards, but keep sibling top margins at zero so
   the visual space is not double-counted by gap plus margin. */
body.pc-feed-shell main.shell > .feed-app > aside.rail.left-rail,
body.pc-feed-shell main.shell > .feed-app > aside.rail.right-rail,
body.pc-feed-shell .shell > .feed-app > aside.rail.left-rail,
body.pc-feed-shell .shell > .feed-app > aside.rail.right-rail,
body.feed-page main.shell > .feed-app > aside.rail.left-rail,
body.feed-page main.shell > .feed-app > aside.rail.right-rail {
  row-gap: 8px !important;
  gap: 8px !important;
  overflow: visible !important;
}

body.pc-feed-shell main.shell > .feed-app > aside.rail.left-rail > .panel,
body.pc-feed-shell main.shell > .feed-app > aside.rail.right-rail > .panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.left-rail > .panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.right-rail > .panel,
body.feed-page main.shell > .feed-app > aside.rail.left-rail > .panel,
body.feed-page main.shell > .feed-app > aside.rail.right-rail > .panel {
  margin: 0 !important;
  margin-block: 0 !important;
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

body.pc-feed-shell main.shell > .feed-app > aside.rail.left-rail > .panel + .panel,
body.pc-feed-shell main.shell > .feed-app > aside.rail.left-rail > .panel + .feed-following-panel,
body.pc-feed-shell main.shell > .feed-app > aside.rail.left-rail > .feed-view-panel + .feed-following-panel,
body.pc-feed-shell main.shell > .feed-app > aside.rail.left-rail > .feed-following-panel + .panel,
body.pc-feed-shell main.shell > .feed-app > aside.rail.right-rail > .panel + .panel,
body.pc-feed-shell main.shell > .feed-app > aside.rail.right-rail > .panel + .mini-graph-card,
body.pc-feed-shell main.shell > .feed-app > aside.rail.right-rail > .mini-graph-card + .panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.left-rail > .panel + .panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.left-rail > .panel + .feed-following-panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.left-rail > .feed-view-panel + .feed-following-panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.left-rail > .feed-following-panel + .panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.right-rail > .panel + .panel,
body.pc-feed-shell .shell > .feed-app > aside.rail.right-rail > .panel + .mini-graph-card,
body.pc-feed-shell .shell > .feed-app > aside.rail.right-rail > .mini-graph-card + .panel,
body.feed-page main.shell > .feed-app > aside.rail.left-rail > .panel + .panel,
body.feed-page main.shell > .feed-app > aside.rail.left-rail > .panel + .feed-following-panel,
body.feed-page main.shell > .feed-app > aside.rail.left-rail > .feed-view-panel + .feed-following-panel,
body.feed-page main.shell > .feed-app > aside.rail.left-rail > .feed-following-panel + .panel,
body.feed-page main.shell > .feed-app > aside.rail.right-rail > .panel + .panel,
body.feed-page main.shell > .feed-app > aside.rail.right-rail > .panel + .mini-graph-card,
body.feed-page main.shell > .feed-app > aside.rail.right-rail > .mini-graph-card + .panel {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* step204-post-menu-contrast:
   The post kebab menu items were unreadable, worst in Dracula. Three rules,
   all loaded or injected after the .post-menu-item design above, were landing
   on them:

     html[data-theme-preference] button
       theme_application.css -- (0,1,2) !important, paints the accent fill
     html[data-theme="dracula"] button
       theme_application.css -- (0,1,2) !important, forces the label black
     .post-actions (kebab camouflage)
       theme_application.css -- sets -webkit-text-fill-color: #000 so only the
       three-dot glyph shows on the card; that property INHERITS, so it reached
       every item inside the menu and painted the labels black no matter what
       `color` resolved to.

   The result was black text on an accent fill inside a dark popover. These
   selectors are (0,2,2), which out-ranks (0,1,2), and restore the design the
   base rules already describe: transparent rows on the popover surface, label
   colour from the theme, destructive in red and reporting in yellow. Text fill
   is returned to currentColor so the camouflage stops leaking in. */
html body .post-actions-menu .post-menu-item,
html body .profile-moderation-menu .post-menu-item {
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
}

html body .post-actions-menu .post-menu-item:hover,
html body .post-actions-menu .post-menu-item:focus-visible,
html body .profile-moderation-menu .post-menu-item:hover,
html body .profile-moderation-menu .post-menu-item:focus-visible {
  background: var(--row-hover) !important;
  color: var(--text) !important;
}

html body .post-actions-menu .post-menu-item.post-delete-btn,
html body .profile-moderation-menu .post-menu-item.post-delete-btn {
  color: var(--red) !important;
}

html body .post-actions-menu .post-menu-item.post-delete-btn:hover,
html body .profile-moderation-menu .post-menu-item.post-delete-btn:hover {
  background: color-mix(in srgb, var(--red) 16%, transparent) !important;
  color: var(--red) !important;
}

html body .post-actions-menu .post-menu-item.post-report-btn,
html body .profile-moderation-menu .post-menu-item.post-report-btn {
  color: var(--yellow) !important;
}

html body .post-actions-menu .post-menu-item.post-report-btn:hover,
html body .profile-moderation-menu .post-menu-item.post-report-btn:hover {
  background: color-mix(in srgb, var(--yellow) 16%, transparent) !important;
  color: var(--yellow) !important;
}

/* The section titles sit in the same inherited-fill trap. */
html body .post-actions-menu .post-menu-section-title,
html body .profile-moderation-menu .post-menu-section-title {
  color: var(--text3) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* step205-image-viewer-shared-close:
   Opening a picture now closes with the site's shared dismiss, the same ✖ the
   Manage Polycule offcanvas, the report dialog and the picture editor use,
   instead of three near-copies -- feed and the post page drew a "×" and the
   profile page a lowercase letter "x", all in a dark circle.

   That shared rule is token-driven: it mixes --pc-surface with --pc-accent for
   the fill and takes the glyph from --pc-ink. Those resolve to the page's card
   and text colours, which over a dark image backdrop would put a dark control
   on a dark ground. The viewer therefore pins what the rule reads, the way the
   picture editor does, so the control comes out as the light square with a
   dark glyph it is on Manage Polycule. Custom properties inherit from the
   nearest ancestor that sets them, so this beats html[data-theme-preference]
   inside the viewer and reaches nothing outside it. */
.image-viewer {
  --pc-surface: #e8e8ea;
  --pc-ink: #111318;
  --pc-on-accent: #fff;
}

html body .image-viewer .image-viewer-close {
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

/* step206-edit-post-picture-pencil:
   Re-editing a picture already on a post, from the edit dialog. This lives here
   rather than in feed_image_editor.css because that file deliberately commits to
   a fixed palette for the editor overlay, while these tiles are feed chrome and
   should follow the page theme like everything else in the dialog. */

/* The pencil is the affordance, so the tile has to say it is interactive
   before the pointer arrives -- and on a touch screen there is no hover at
   all, which is why the button stays visible below the hover breakpoint
   rather than relying on a state that never happens.

   The button rules are scoped `.edit-post-image .edit-post-image-btn` for the
   reason documented at the top of this file: theme_application.css is injected
   at runtime and its html[data-theme-preference] button rule is (0,1,2) AND
   !important, so a single class loses even with !important and the pencil
   renders as a filled accent button. Two classes reach (0,2,0) and win. */
.edit-post-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin: 4px 0 2px;
}

.edit-post-images[hidden] {
  display: none !important;
}

.edit-post-image {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg3, #1f2634);
}

.edit-post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-post-image .edit-post-image-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.edit-post-image:hover .edit-post-image-btn,
.edit-post-image .edit-post-image-btn:focus-visible {
  opacity: 1;
}

.edit-post-image .edit-post-image-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A picture whose bytes are waiting to be saved says so, so the pencil does
   not look like it did nothing. */
.edit-post-image.is-edited::after {
  content: "Edited";
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--accent, #5b6cff);
  color: var(--on-accent, #fff);
}

@media (hover: none) {
  .edit-post-image .edit-post-image-btn {
    opacity: 1;
    background: transparent !important;
  }
  .edit-post-image .edit-post-image-btn svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
  }
}

@media (max-width: 700px) {
  /* The four Studio filters need more room than a phone row provides. Wrapping
     keeps every filter legible and avoids a half-visible last tab. */
  .bluesky-studio-page .bluesky-profile-manager-filters {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0;
  }
}

/* step180-feed-right-rail-split:
   Modern Bluesky-style right rail on /feed: the search pill stays pinned at
   the rail top while the Who to follow and Your Polycule Graph cards are
   pushed to the bottom of a viewport-height sticky rail, so the sidebar reads
   as action-at-top + context-at-bottom instead of a top-heavy stack. */
@media (min-width: 1181px) {
  body.pc-feed-shell:not(.profile-page) main.shell .feed-app > aside.right-rail,
  body.pc-feed-shell:not(.profile-page) main.shell .feed-app > .right-rail,
  body.pc-feed-shell:not(.profile-page) .shell .feed-app > aside.right-rail,
  body.pc-feed-shell:not(.profile-page) .feed-app > aside.right-rail,
  body.pc-feed-shell:not(.profile-page) .feed-app > .right-rail {
    grid-template-rows: auto 1fr auto auto !important;
    height: calc(100vh - 76px - 14px) !important;
    max-height: calc(100vh - 76px - 14px) !important;
    align-content: stretch !important;
  }

  body.pc-feed-shell:not(.profile-page) .feed-app > .right-rail > .feed-search-wrap {
    grid-row: 1 !important;
  }

  body.pc-feed-shell:not(.profile-page) .feed-app > aside.right-rail::after,
  body.pc-feed-shell:not(.profile-page) .feed-app > .right-rail::after {
    content: "" !important;
    display: block !important;
    grid-row: 2 !important;
  }
}