/* Guest mode (js/guest.js): Explore, topics, moods, stories, Saved, the topic picker, the soft sign-in sheet.
   Only design tokens and components from wr.css; no new colours. */
html.m-guest .rail .newbtn, html.m-guest .fab { display: none }

.gx-pad { padding: 8px 16px }
.gx-hero { padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 6px }
.gx-hero h1 { font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.01em }
.gx-hero p { font-size: 15px; line-height: 22px; color: var(--text-2); max-width: 520px }
.gx-head { padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 4px }
.gx-head h1 { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.01em }
.gx-head h1.quote, .gx-sh3.quote { font-style: italic }
.gx-moods { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 16px 6px }
.gx-moods::-webkit-scrollbar { display: none }
.gx-bar { padding: 4px 16px 8px }
.gx-net { max-width: 360px }

/* a topic: title row + a horizontal strip of cards */
.gx-sec { padding: 10px 0 6px }
.gx-sh { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px 16px }
.gx-sh h2, h2.gx-sh { font-size: 17px; line-height: 24px; font-weight: 650 }
.gx-sh h2 { display: inline-flex; align-items: center; gap: 8px }
.gx-sh .i { color: var(--accent) }
.gx-shs { padding-top: 18px; flex-wrap: wrap; column-gap: 10px }
.gx-st { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 0; color: var(--text); text-align: left; font: inherit }
.gx-st .n { font-size: 13px; color: var(--text-3) }
.gx-st > .i:last-child { color: var(--text-3) }
.gx-strip { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 16px; padding-bottom: 6px }
.gx-strip::-webkit-scrollbar { display: none }
.gx-card { height: 176px; overflow: hidden; cursor: pointer; scroll-snap-align: start }
.gx-card .meta { min-width: 0 }
.gx-card .meta .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.gx-card .t { -webkit-line-clamp: 5 }
.gx-cwt { display: flex !important; gap: 6px; align-items: flex-start; color: var(--text-2); font-weight: 500 }
.gx-cwt .i { flex: none; margin-top: 3px; color: var(--warn) }
.gx-card .ft { gap: 6px }
.gx-mini { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); white-space: nowrap }
.gx-mini.pop, .gx-c.pop { background: var(--accent-soft); color: var(--accent); box-shadow: none }
.gx-all { justify-content: center; align-items: center; flex-direction: row !important; gap: 6px; width: 140px !important; font-size: 14px; font-weight: 600; color: var(--accent); height: 176px }
.gx-card:focus-visible, .gx-story:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }

/* chips under a post in a list: the model's facts, small */
.gx-chips { margin-top: 8px }
.gx-c { height: 26px; padding: 0 10px; font-size: 13px }
.gx-c.guess { font-style: italic }
.gx-why { display: inline-flex; align-items: center; gap: 5px; height: 26px; font-size: 13px; font-weight: 600; color: var(--accent) }
.post.gx-maybe .body { color: var(--text-2) }
.post.gx-maybe .meta .name { font-weight: 550 }
.gx-moresh { padding: 22px 16px 6px; border-top: 1px solid var(--line); margin-top: 8px; display: flex; flex-direction: column; gap: 2px }
.gx-moresh h2 { font-size: 17px; line-height: 24px; font-weight: 650 }
.gx-catfoot { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px 16px 8px; border-top: 1px solid var(--line); margin-top: 8px }

/* stories / Happening now */
.gx-story { cursor: pointer; display: flex; flex-direction: column; gap: 6px }
.gx-story.cc { width: 272px; height: 196px; overflow: hidden; scroll-snap-align: start }
.gx-story.full { margin: 0 12px 10px; padding: 14px 14px 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line) }
.gx-stories { display: flex; flex-direction: column; padding-top: 4px }
.gx-stories.side .gx-story.full { margin: 0 16px 10px }
.gx-kick { display: flex; align-items: center; gap: 8px; min-height: 18px }
.gx-sh3 { font-size: 17px; line-height: 23px; font-weight: 650; overflow-wrap: anywhere }
.gx-story.cc .gx-sh3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.gx-tags { display: flex; gap: 6px; flex-wrap: wrap }
.gx-tags span { font-size: 12px; line-height: 18px; padding: 0 8px; border-radius: 999px; background: var(--sunken); color: var(--text-2) }
.gx-q { margin: 2px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--sunken); font-size: 14px; line-height: 20px; color: var(--text) }
.gx-q p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere }
.gx-story.cc .gx-q p { -webkit-line-clamp: 2 }
.gx-q footer { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }

/* sign-in, footers */
.gx-cta { display: flex; gap: 14px; align-items: flex-start; margin: 14px 12px; padding: 16px; border-radius: 16px; background: var(--accent-soft) }
.gx-cta h2 { font-size: 22px; line-height: 28px; font-weight: 500 }
.gx-cta p { font-size: 14px; line-height: 20px; color: var(--text-2) }
.gx-foot { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 8px; font-size: 13px; line-height: 18px; color: var(--text-3); border-top: 1px solid var(--line); margin-top: 8px }
.gx-foot a { font-weight: 600; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center }
.gx-soft { padding: 6px 20px 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.gx-soft h2 { font-size: 24px; line-height: 30px; font-weight: 500 }
.gx-soft p { font-size: 15px; line-height: 22px; color: var(--text-2) }
.gx-soft .col { width: 100% }
.gx-src { padding: 10px 16px 4px }

/* first open: pick topics */
.gx-pick { max-width: 560px; margin: 0 auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 10px }
.gx-pick h1 { font-size: 30px; line-height: 36px; font-weight: 500 }
.gx-pick p { font-size: 15px; line-height: 22px; color: var(--text-2) }
.gx-pickfoot { display: flex; flex-direction: column; gap: 8px; margin-top: 18px }
.gx-pickfoot .btn[disabled] { opacity: .55 }

/* loading shape of Explore (no layout jump when it fills) */
.gx-skel { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px }
.gx-skel .b { height: 14px; border-radius: 7px; background: var(--sunken) }
.gx-skel .card { flex: none; width: 236px; height: 176px; border-radius: 12px; background: var(--sunken) }
.gx-skel .row { overflow: hidden }
@media (prefers-reduced-motion: no-preference) { .gx-skel .b, .gx-skel .card { animation: gxpulse 1.4s ease-in-out infinite } }
@keyframes gxpulse { 50% { opacity: .55 } }

html.dk .gx-strip { scroll-padding: 0 16px }
@media (hover: hover) and (pointer: fine) {
  .gx-story.full:hover, .gx-card:hover { background: color-mix(in oklch, var(--sunken) 60%, var(--surface)) }
  .gx-st:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px }
}

/* Bluesky's own picks, for comparison: set apart below everything Wildroot ranks */
.gx-compare { margin: 22px 0 6px; padding: 14px 0 10px; background: var(--sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.gx-cmp-head { padding: 0 16px 6px; display: flex; flex-direction: column; gap: 3px }
.gx-cmp-head h2 { font-size: 17px; line-height: 24px; font-weight: 650; display: flex; align-items: center; gap: 8px }
.gx-cmp-h3 { font-size: 14px; line-height: 20px; font-weight: 650; color: var(--text-2); padding: 12px 16px 2px }
.gx-compare .chip { background: var(--surface) }
.gx-feedcard { width: 220px !important; height: 128px; overflow: hidden; text-align: left; gap: 4px !important; cursor: pointer; scroll-snap-align: start }
.gx-feedcard .name { font-size: 15px; font-weight: 650; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gx-feedcard .t { font-size: 13px; line-height: 18px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.gx-cmp-banner { background: var(--sunken); border-bottom: 1px solid var(--line); padding-bottom: 12px }