/* FILE: static/sideblocks.css: blocks in the side columns fit a narrow column (2.45.0; owner 27 Oct: "any block that
   is going in a side needs to be optimized to be in a narrow window and wont take the whole side of the screen").
   Nothing wider than the column; theme-coloured links; a block taller than its share of the screen
   (Admin -> Community -> Feed -> "Side blocks that fit", 3 = a third) folds behind "Show more" (static/sideblocks.js). */

.col-left > .block-panel, .col-right > .block-panel { min-width: 0; max-width: 100%; }
.col-left .block-content, .col-right .block-content {
  min-width: 0; overflow-wrap: break-word; container-type: inline-size;
}
.col-left .block-content :is(img, video, iframe, canvas, svg, table, pre),
.col-right .block-content :is(img, video, iframe, canvas, svg, table, pre) { max-width: 100%; }
.col-left .block-content pre, .col-right .block-content pre { white-space: pre-wrap; }

/* plain links in side blocks take the theme's colour, visited or not (they showed the browser's purple) */
.col-left .block-content a:not([class]), .col-right .block-content a:not([class]),
.col-left .block-content a:not([class]):visited, .col-right .block-content a:not([class]):visited { color: var(--accent); }

/* the fold */
.block-panel.sb-fold > .block-content { max-height: var(--sb-h, 260px); overflow: hidden; position: relative; }
.block-panel.sb-fold > .block-content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-panel, #17110c));
}
.block-panel.sb-fold.sb-open > .block-content { max-height: none; overflow: visible; }
.block-panel.sb-fold.sb-open > .block-content::after { display: none; }
.sb-more {
  display: block; width: calc(100% - 20px); margin: 2px 10px 10px; padding: 6px 8px; font: inherit; font-size: 14px;
  color: var(--accent); background: transparent; border: 1px solid var(--border-hairline); border-radius: 999px; cursor: pointer;
}
.sb-more:hover, .sb-more:focus-visible { border-color: var(--accent); }
.block-panel:not(.sb-fold) > .sb-more { display: none; }

/* an empty block (the Home page text block with nothing written, for members) takes no room */
.block-panel:has(> .block-content > .home-block:empty) { display: none; }

/* Home in the menu */
.nav-home-n:empty { display: none; }
.nav-home-n .fd-count {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 12px; line-height: 19px;
  text-align: center; color: var(--bg-base, #0d0a08); background: var(--accent); font-weight: 700;
}

/* Recent updates in a side column: the latest note, its words cut to three lines */
.upd-short { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.upd-short .upd-date { justify-self: end; font-size: 12px; color: var(--text-muted); }
.upd-short-title { grid-column: 1 / -1; font-weight: 700; line-height: 1.35; }
.upd-short-body { grid-column: 1 / -1; font-size: 13px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.recent-pages-block .upd-short + .upd-all { display: inline-block; margin-top: 8px; }