/* social-cols.css — Social's right column, Layout A (lane SOCIALBUILD, 22 Oct 2026). Both views; companion of
   social-cols.js, which sets html[data-scol-face] = alpha | seasons | trend. Only the page's own tokens (--card, --border,
   --t1..3, --green, --mono), its card shape and its .feed-tab pill. */

/* the α button: Advanced's own mark, the one Alpha Stream button, at every width; from 1061 px it sits right of
   Communities (below, where it always was) */
#mobTrendBtn { display: inline-flex; }
@media (min-width: 1061px) { #feedTabsRow #mobTrendBtn { margin-left: 6px; } }
#mobTrendBtn.scol-lit { border-radius: 9px; box-shadow: 0 0 0 1px rgba(74,222,74,.55), 0 0 12px rgba(74,222,74,.18); }

/* the pill row: the column's top row on every face (the drawer's close button rides on its right) */
.aside .scol-pills { display: flex; align-items: center; gap: 4px; padding: 12px 12px 6px; flex-shrink: 0; position: sticky; top: 0; z-index: 3; background: inherit; }
.aside .scol-pills .feed-tab { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.aside .scol-pills #asideClose { position: static; transform: none; margin-left: 4px; flex: none; }
@media (max-width: 640px) { .aside .scol-pills { padding: 2px 16px 8px; } }

/* one face at a time; the ALPHA STREAM title only on the stream */
html:not([data-scol-face="alpha"]) #ioAsideHeader,
html:not([data-scol-face="alpha"]) .aside .scol-stream { display: none !important; }
html[data-scol-face="alpha"] #ioAsideHeader { padding-top: 10px; padding-bottom: 6px; }
html:not([data-scol-face="seasons"]) .aside .scol-seasons,
html:not([data-scol-face="trend"]) .aside .scol-trend { display: none; }
/* a section the page's own shell has just moved under the stream waits for social-cols.js to take it to Trending */
html[data-scol-face] #ioAsideContent > .aside-section:not(.scol-stream) { display: none; }
/* before social-cols.js runs, Basic's column draws nothing (it opens on Seasons, not on a flash of the stream) */
html[data-ux="basic"]:not([data-scol-face]) .social-app > .aside > * { visibility: hidden; }

/* Trending: the rail's own section look */
.aside .scol-trend .aside-section { padding: 6px 0 10px; border: 0; }
.aside .scol-trend .aside-title { padding: 0 0 6px; margin: 0; border: 0 !important; }
.aside .scol-trend.scol-mirror a:hover { background: rgba(255,255,255,.04) !important; }

/* Seasons cards */
.aside .scol-card { margin: 0 0 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.015); }
.aside .scol-card .spin { margin: 10px auto; }
.aside .scol-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.aside .scol-lbl { font: 700 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.aside .scol-chip { font: 700 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--t2); white-space: nowrap; }
.aside .scol-chip.o { color: #ffa04d; border-color: rgba(255,122,1,.35); }
.aside .scol-me { display: flex; align-items: center; gap: 10px; }
.aside .scol-big { font: 700 24px/1.05 var(--mono); color: var(--t1); letter-spacing: -.01em; }
.aside .scol-big small { font-size: 10.5px; color: var(--t3); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.aside .scol-sub { margin-top: 3px; font: 500 10px var(--mono); color: var(--t3); }
.aside .scol-sub b { color: var(--t2); }
.aside .scol-next { margin-top: 10px; font: 500 11.5px/1.45 Inter, system-ui, sans-serif; color: var(--t2); }
.aside .scol-next b { color: var(--t1); font-family: var(--mono); }
.aside .scol-note { font: 500 11.5px/1.5 Inter, system-ui, sans-serif; color: var(--t2); }
.aside .scol-note.sm { margin-top: 10px; font-size: 10.5px; color: var(--t3); }
.aside .scol-note a { color: var(--green); text-decoration: none; }
.aside .scol-rows { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.05); }
.aside .scol-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); font: 600 11px var(--mono); color: var(--t2); }
.aside .scol-row .r { width: 40px; color: var(--t3); flex: none; }
.aside .scol-row .n { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.aside .scol-row .n > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aside .scol-row .p { color: var(--t1); }
.aside .scol-row.me, .aside .scol-row.me .p { color: var(--green); }
.aside .scol-av { display: inline-flex; flex: none; border-radius: 7px; overflow: hidden; line-height: 0; background: var(--green-dim, rgba(74,222,74,.08)); border: 1px solid rgba(255,255,255,.06); }
.aside .scol-av > *, .aside .scol-av img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.aside .scol-pool { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font: 600 10.5px var(--mono); color: var(--t3); }
.aside .scol-pool b { color: var(--t1); text-align: right; }
.aside .scol-pool.sm { font-size: 9.5px; padding-top: 0; }
.aside .scol-pool.sm b { color: var(--t2); }
.aside .scol-crown { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); font: 600 11px var(--mono); color: var(--t2); }
.aside .scol-crown:last-child { border-bottom: 0; }
.aside .scol-crown .w { flex: 1; min-width: 0; }
.aside .scol-crown .x { color: var(--t1); }
.aside .scol-crown small { display: block; font: 500 9.5px var(--mono); color: var(--t3); }
.aside .scol-cm { display: inline-flex; flex: none; width: 18px; height: 18px; }
.aside .scol-cm svg { width: 18px; height: 18px; }
.aside .scol-link { display: inline-block; margin-top: 10px; font: 700 10px var(--mono); letter-spacing: .06em; color: var(--green); text-decoration: none; text-transform: uppercase; }
.aside .scol-btn { display: block; width: 100%; margin-top: 10px; min-height: 40px; border-radius: 10px; border: 1px solid #4ade4a; background: #4ade4a; color: #041004; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

/* MENUICONS (founder 23 Oct, on a MacBook: "still a couple gaps not quite even"; release port): ONE desktop gutter, the
   side menu's own 10 px: page edge to menu, menu to the posts, posts to the column, column to the page edge; and one
   top: the menu, the tab pills and the column 10 px under the bar. The feed takes the room between the menu and the
   column (it was the page's own 304 px rail margin, a 432 px feed at 1280). The cards inside keep their caps. */
@media (min-width: 1061px) {
  html { --mi-l: 0px; }
  html.bx-side:not(.bx-unpinned) { --mi-l: 240px; }
  html.bx-side.bx-mhidden { --mi-l: 58px; }
  html.bx-side .social-app > .sidebar { display: none !important; }
  html.bx-side .social-app > .main { flex: none; box-sizing: border-box; width: calc(100vw - var(--mi-l) - 280px - 30px); max-width: none;
    margin-left: 10px !important; margin-right: 0 !important; padding-top: 6px; }
  html.bx-side .social-app #feedEl > .post-item, html.bx-side .social-app #pvFeedEl > .post-item, html.bx-side .social-app #tagViewFeed > .post-item { margin-left: 0; margin-right: 0; }
  html.bx-side .social-app .feed-tabs { padding-left: 0; padding-right: 0; padding-bottom: 0; }
  html.bx-side .social-app > .aside { right: 10px; top: calc(var(--topbar-h) + 10px); height: calc(100vh - var(--topbar-h) - 20px); }
  html.bx-side #socialFab { right: calc(10px * 2 + 280px + 20px); }
}