/* Bluesky web (bsky.app), feed post and opened post, light and dim (the dark theme bsky.app shows by default).
   Sizes from the official app's source (bluesky-social/social-app at 4e4ad9c, MIT), colours and the rest measured on
   bsky.app in Chrome (tools/fidelity-harness.mjs, Bluesky cases). Inter is self-hosted (SIL OFL, public/fonts/OFL.txt). */
@font-face { font-family: InterVariable; src: url(fonts/InterVariable.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }

.bs { --bs-bg: #fff; --bs-text: #000; --bs-muted: rgb(64, 81, 104); --bs-icon: rgb(102, 123, 153); --bs-border: rgb(220, 226, 234);
  --bs-inset: rgb(220, 226, 234); --bs-c25: rgb(249, 250, 251); --bs-c50: rgb(239, 242, 246); --bs-line: rgb(220, 226, 234);
  --bs-link: rgb(0, 106, 255); --bs-check: rgb(0, 106, 255); --bs-follow: rgb(35, 46, 62); --bs-follow-text: #fff; }
.bs.dim { --bs-bg: rgb(21, 29, 40); --bs-text: #fff; --bs-muted: rgb(171, 184, 201); --bs-icon: rgb(111, 131, 159); --bs-border: rgb(44, 58, 78);
  --bs-inset: rgb(72, 91, 117); --bs-c25: rgb(28, 39, 54); --bs-c50: rgb(34, 46, 63); --bs-line: rgb(57, 73, 96);
  --bs-link: rgb(77, 151, 255); --bs-check: rgb(77, 151, 255); --bs-follow: rgb(226, 231, 238); --bs-follow-text: rgb(21, 29, 40); }

.bs, .bs * { box-sizing: border-box; }
.bs { display: block; width: 600px; position: relative; overflow: hidden; background: var(--bs-bg); color: var(--bs-text);
  font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 15px; font-weight: 400; line-height: 20px; font-variant-ligatures: no-contextual; font-variant-emoji: unicode;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none; }
.bs svg { display: block; flex: none; }
.bs img { display: block; }
.bs-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.bs-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avatars and media carry a 1px inset border at 0.6 opacity (0.5px on 2x screens, as bsky.app draws it). */
.bs-inset { position: absolute; inset: 0; border: 1px solid var(--bs-inset); border-radius: 12px; opacity: 0.6; pointer-events: none; }
@media (min-resolution: 2dppx) { .bs-inset { border-width: 0.5px; } }
.bs-av { position: relative; flex: none; border-radius: 50%; overflow: hidden; background: var(--bs-c25); }
.bs-av img, .bs-av svg { width: 100%; height: 100%; object-fit: cover; }
.bs-av .bs-inset { border-radius: 50%; }

/* ---------- feed post ---------- */
.bs-feed { padding: 0 15px 8px 10px; border-top: 1px solid var(--bs-border); }
.bs-feed.first, .bs-feed.connect-above { border-top: 0; }
.bs-feed.connect-below { padding-bottom: 0; }
.bs-top { display: flex; height: 8px; padding-left: 8px; }
.bs-top .bs-line { width: 2px; margin: 0 20px 4px; }
.bs-row { display: flex; margin-top: 1px; }
.bs-avcol { flex: none; display: flex; flex-direction: column; padding: 0 10px 0 8px; }
.bs-avcol .bs-av { width: 42px; height: 42px; }
.bs-avcol .bs-line { flex: 1 1 auto; width: 2px; margin: 4px auto 0; }
.bs-line { background: var(--bs-line); }
.bs-main { flex: 1 1 0; min-width: 0; }
/* React Native Web lays every view out as a flex column, so no margin collapses into its parent's. */
.bs-main, .bs-embeds, .bs-tbody, .bs-tembeds, .bs-quote { display: flex; flex-direction: column; }

.bs-meta { display: flex; align-items: center; gap: 4px; padding-bottom: 4px; }
.bs-who, .bs-id { display: flex; align-items: flex-end; flex: 0 1 auto; min-width: 0; }
.bs-name { flex: none; max-width: 70%; font-weight: 600; line-height: 17px; }
.bs-badge { align-self: center; padding-left: 2px; color: var(--bs-check); }
.bs-badge svg { width: 12px; height: 12px; }
.bs-handle { flex: 0 10 auto; min-width: 0; color: var(--bs-muted); line-height: 17px; }
.bs-time { flex: none; padding-left: 4px; color: var(--bs-muted); line-height: 17px; white-space: nowrap; }
.bs-qav { align-self: center; width: 16px; height: 16px; margin-right: 2px; }

.bs-textwrap { margin-bottom: 2px; }
.bs-text { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.bs-link { color: var(--bs-link); text-decoration: none; }
.bs-morerow { display: flex; align-items: center; gap: 4px; }
.bs-more { display: block; align-self: flex-start; padding: 0 0 5px; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; color: var(--bs-link); cursor: pointer; }
/* "1/3" on each post of the author's own thread, inline after the text. */
.bs-num { display: inline-flex; padding: 0 5px; border-radius: 999px; background: var(--bs-c50); vertical-align: baseline; }
.bs-num span { font-size: 11.3px; line-height: 16.95px; font-weight: 500; color: var(--bs-muted); font-variant-numeric: tabular-nums; }
.bs-num.block { display: flex; flex: none; align-self: flex-start; position: relative; top: -2px; margin-bottom: -2px; }
.bs-num.block span { line-height: normal; }

.bs-embeds { padding-bottom: 4px; }

/* ---------- images ---------- */
.bs-media { margin-top: 8px; }
.bs-media.video { margin-top: 0; padding-top: 4px; }
.bs-fit { position: relative; width: 100%; }
.bs-fit > .bs-box { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 12px; overflow: hidden; }
.bs-fit > .bs-box.full { right: 0; }
.bs-box, .bs-gitem, .bs-citem { background: var(--bs-c25); }
.bs-box img, .bs-gitem img, .bs-citem img { width: 100%; height: 100%; object-fit: cover; }
.bs-box img.contain { object-fit: contain; }
.bs-whole { position: relative; width: 100%; border-radius: 12px; overflow: hidden; }
.bs-grid { display: flex; flex-direction: column; gap: 4px; border-radius: 12px; overflow: hidden; }
.bs-grow { display: flex; gap: 4px; }
.bs-gcol { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; aspect-ratio: 1; min-width: 0; }
.bs-gitem { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.bs-grow > .bs-gitem { aspect-ratio: 1; }
.bs-grid.four .bs-grow > .bs-gitem { aspect-ratio: 1.5; }
.bs-gitem .bs-inset { border-radius: 12px; }
/* Galleries scroll sideways across the whole post: the strip bleeds to the post's edges and pads back to the column. */
.bs-carousel { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.bs-carousel::-webkit-scrollbar { display: none; }
.bs-feed .bs-carousel { margin: 0 -15px 0 -70px; padding: 0 15px 0 70px; }
.bs-thread .bs-carousel { margin: 0 -16px; padding: 0 16px; }
.bs .bs-quote .bs-carousel { margin: 0 -13px; padding: 0 13px; }
.bs-citem { position: relative; flex: none; border-radius: 12px; overflow: hidden; }
.bs-badges { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 3px; }
.bs-pill { display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 8px; background: var(--bs-c25); opacity: 0.8; }
.bs-pill span { font-size: 8px; line-height: 10px; font-weight: 700; color: var(--bs-text); }
.bs-pill svg { width: 12px; height: 12px; color: var(--bs-text); }
.bs-pill.crop { padding: 3px; }
.bs-count { position: absolute; top: 4px; right: 4px; }
.bs-poster { position: absolute; inset: 0; background: #000 no-repeat 50% 50% / contain; }
.bs-poster.blur::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; filter: blur(32px); transform: scale(1.2); }
.bs-poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bs-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
.bs-play svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }

/* ---------- link card ---------- */
.bs-card { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--bs-border); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; }
.bs-cardimg { aspect-ratio: 1200 / 630; width: 100%; object-fit: cover; }
.bs-cardbody { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
.bs-cardimg + .bs-cardbody { border-top: 1px solid var(--bs-border); }
.bs-cardtext { display: flex; flex-direction: column; gap: 3px; padding: 0 12px 4px; }
.bs-cardtitle { font-weight: 600; line-height: 20px; -webkit-line-clamp: 3; }
.bs-carddesc { font-size: 13.1px; line-height: 17px; -webkit-line-clamp: 4; }
.bs-cardimg ~ .bs-cardbody .bs-carddesc { -webkit-line-clamp: 2; }
.bs-cardfoot { padding: 0 12px; }
.bs-cardfoot hr { margin: 0; border: 0; border-top: 1px solid var(--bs-border); height: 0; }
.bs-site { display: flex; align-items: center; gap: 2px; padding: 6px 0 8px; color: var(--bs-muted); }
.bs-site svg { width: 12px; height: 12px; color: var(--bs-icon); }
.bs-site span { font-size: 11.3px; line-height: 15px; }

/* ---------- quote ---------- */
.bs-quote { margin-top: 8px; padding: 12px; border: 1px solid var(--bs-border); border-radius: 12px; }
.bs-qtext { -webkit-line-clamp: 20; }

/* ---------- actions ---------- */
.bs-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 2px; color: var(--bs-icon); }
.bs-actl { display: flex; flex: 1 1 0; max-width: 320px; }
.bs-act { display: flex; flex: 1 1 0; align-items: flex-start; }
.bs-act:first-child { margin-left: -6px; }
.bs-actr { display: flex; justify-content: flex-end; gap: 8px; }
.bs-btn { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; }
.bs-btn svg { width: 18px; height: 18px; }
.bs-btn span { font-size: 13.1px; line-height: 17px; }

/* ---------- opened post ---------- */
.bs-thread { padding: 16px 16px 0; }
.bs-thead { display: flex; gap: 12px; padding-bottom: 12px; }
.bs-thead .bs-av { width: 42px; height: 42px; }
.bs-tid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.bs-tname { display: flex; align-items: center; max-width: 100%; }
.bs-tname .bs-name { flex: 0 1 auto; max-width: none; min-width: 0; font-size: 16.9px; line-height: 22px; }
.bs-tname .bs-badge { padding-left: 4px; }
.bs-tname .bs-badge svg { width: 14px; height: 14px; }
.bs-thandle { max-width: 100%; color: var(--bs-muted); }
.bs-follow { align-self: center; flex: none; display: flex; align-items: center; height: 33px; padding: 0 14px; border-radius: 999px; background: var(--bs-follow); color: var(--bs-follow-text); }
.bs-follow svg { width: 16px; height: 16px; margin: 0 3.5px 0 -1.5px; }
.bs-follow span { font-size: 13.1px; line-height: 17px; font-weight: 500; }
.bs-tbody { padding-bottom: 8px; }
.bs-tbody > .bs-text { font-size: 16.9px; line-height: 22px; }
.bs-tembeds.text { padding: 4px 0; }
.bs-details { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; color: var(--bs-muted); }
.bs-date { font-size: 13.1px; line-height: 17px; }
.bs-gate { display: flex; align-items: center; gap: 4px; }
.bs-gate svg { width: 16px; height: 16px; }
.bs-gate span { font-size: 13.1px; line-height: 15px; }
.bs-counts { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; column-gap: 16px; margin-top: 12px; padding: 8px 0; border-top: 1px solid var(--bs-border); color: var(--bs-muted); }
.bs-counts b { font-weight: 600; color: var(--bs-text); }
.bs-tactions { margin-left: -5px; padding-bottom: 2px; }
.bs-tactions .bs-actions { padding-top: 0; }
.bs-tactions .bs-act:first-child { margin-left: -2px; }
.bs-tactions .bs-btn svg { width: 22px; height: 22px; }
.bs-tactions .bs-btn span { font-size: 15px; line-height: 20px; }