/* Stories and groups. Uses the tokens and furniture in southbag.css: greyscale, square corners,
   ridge panels, inset boxes. Buttons are never styled here. Every picture sits in a box of a fixed
   shape and is stretched to fill it. */

/* -- Stories tray ------------------------------------------------------ */
.stories-bar { border: 2px ridge var(--sb-ridge); background: var(--sb-panel); padding: 0.6rem 0.75rem 0.4rem; margin: 0 0 1rem; }
.stories-bar[hidden] { display: none; }
.stories-head { display: flex; align-items: center; gap: 6px; box-shadow: none; }
.stories-head h3 { margin: 0; }
.stories-head .spacer { flex: 1; box-shadow: none; }
.stories-track { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding: 12px 8px 8px; box-shadow: none; }
.story-bubble { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; align-items: center; box-shadow: none; }
.story-open { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; color: var(--sb-ink); text-decoration: none; box-shadow: none; }
.story-open .avatar { --size: 62px; }
.story-bubble .label { max-width: 100%; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.story-bubble.seen .label { color: var(--sb-muted); }
.story-add { width: 62px; height: 62px; padding: 2px; white-space: normal; font-size: 0.8rem; line-height: 1.1; }
.stories-empty { align-self: center; margin: 0; font-size: 0.85rem; color: var(--sb-muted); box-shadow: none; }

/* -- Story composer dialog --------------------------------------------- */
.story-composer .story-mode { margin-bottom: 12px; }
.story-composer-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: start; box-shadow: none; }
.story-composer .stack .field { margin: 0; }
.story-preview {
  position: relative; width: 100%; aspect-ratio: 9 / 16; background: #222; border: 2px inset var(--sb-bevel); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.story-preview img, .story-preview video { width: 100%; height: 100%; display: block; box-shadow: none; }
.story-preview-empty { margin: 0; padding: 8px; color: #ccc; font-size: 0.8rem; text-align: center; }
.story-preview-text { padding: 10px; text-align: center; font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: none; }
.story-backgrounds { display: flex; flex-wrap: wrap; gap: 0 16px; box-shadow: none; }
.story-backgrounds .checkbox { margin: 4px 0; }
@media (max-width: 560px) {
  .story-composer-grid { grid-template-columns: 1fr; }
  .story-preview { width: 150px; margin: 0 auto; }
}

/* -- Story viewer ------------------------------------------------------ */
/* One column the width of a 9:16 box that fits the screen: progress, who, the box, caption, controls. */
body.story-viewer-open { overflow: hidden; }
body.story-viewer-open .menu.popup { z-index: 960; }
.story-viewer {
  position: fixed; inset: 0; z-index: 950; display: flex; justify-content: center; align-items: flex-start;
  overflow-y: auto; padding: 12px 16px 24px; background: var(--sb-bg); outline: none; user-select: none; -webkit-user-select: none;
}
.story-stage {
  width: min(max(220px, calc((100dvh - 250px) * 9 / 16)), calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; box-shadow: none;
}
.story-stage > .loading { padding-top: 40vh; }
.story-head { box-shadow: none; }
.story-progress { display: flex; gap: 4px; box-shadow: none; }
.story-progress span { flex: 1; height: 6px; border: 1px inset var(--sb-bevel); background: var(--sb-button); }
.story-progress i { display: block; height: 100%; width: 0; background: var(--sb-blue); }
.story-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; box-shadow: none; }
.story-meta .spacer { display: none; }
.story-who { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--sb-ink); text-decoration: none; box-shadow: none; }
.story-who .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: none; }
.story-time { color: var(--sb-muted); font-size: 0.85rem; white-space: nowrap; }
/* The fixed 9:16 box. Photos and videos of any shape are stretched to fill it. */
.story-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #222; border: 2px ridge var(--sb-ridge); overflow: hidden; touch-action: none; }
.story-media { position: absolute; inset: 0; box-shadow: none; }
.story-media img, .story-media video { width: 100%; height: 100%; display: block; pointer-events: none; box-shadow: none; }
.story-hit { position: absolute; top: 0; bottom: 0; box-shadow: none; }
.story-hit.prev { left: 0; width: 30%; } .story-hit.next { right: 0; width: 70%; }
.story-caption { text-align: center; box-shadow: none; }
.story-caption:empty { display: none; }
.story-caption p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-controls { display: flex; justify-content: space-between; gap: 8px; box-shadow: none; }
.story-foot { display: flex; justify-content: center; box-shadow: none; }
.story-reply { display: flex; align-items: center; gap: 6px; width: 100%; box-shadow: none; }
.story-reply .story-reply-input { flex: 1; min-width: 0; }
.story-peek { position: absolute; top: 35vh; width: 150px; display: flex; justify-content: center; box-shadow: none; }
.story-peek.prev { left: 3vw; } .story-peek.next { right: 3vw; }
.story-peek-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; white-space: normal; }
.story-peek-btn .avatar { --size: 56px; }
.story-message { width: min(420px, calc(100vw - 32px)); padding-top: 20vh; }
.story-message .story-close { align-self: flex-end; }
.story-viewers { box-shadow: none; }
@media (max-width: 1100px) { .story-peek { display: none; } }
@media (max-width: 640px) { .story-viewer { padding: 8px 16px 16px; } }

/* -- Groups list ------------------------------------------------------- */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; box-shadow: none; }
.group-tile { display: flex; flex-direction: column; padding: 0; color: var(--sb-ink); text-decoration: none; transition: transform 1.4s linear; }
.group-tile:hover { transform: rotate(-0.4deg); }
.group-tile:nth-child(even):hover { transform: rotate(0.4deg); }
/* Fixed-height banner box; the image is stretched into it. Plain grey when there is none. */
.group-tile-banner { height: 90px; background: var(--sb-hairline); border-bottom: 2px inset var(--sb-bevel); overflow: hidden; box-shadow: none; }
.group-tile-banner img { width: 100%; height: 100%; display: block; box-shadow: none; }
.group-tile .group-avatar { position: relative; margin: -24px 0 0 10px; }
.group-tile-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 4px 10px 10px; box-shadow: none; }
.south-item.group-tile .group-tile-body strong { font-size: 1.1rem; white-space: normal; overflow-wrap: anywhere; }
.group-tile-meta { color: var(--sb-muted); font-size: 0.85rem; box-shadow: none; }
.group-tile-desc { margin: 0; font-size: 0.85rem; color: var(--sb-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-tile .chip { align-self: flex-start; margin-top: auto; }
/* Group pictures are square boxes; the image is stretched into them. */
.group-avatar { --size: 48px; width: var(--size); height: var(--size); display: inline-block; flex-shrink: 0; overflow: hidden; border: 1px solid #111; background: #ddd; }
.group-avatar img { width: 100%; height: 100%; display: block; box-shadow: none; }
.group-avatar .initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #111; font-weight: 700; font-size: calc(var(--size) * 0.55); }
.group-avatar.lg { --size: 112px; }
.group-search { max-width: 480px; margin: 0 0 14px; box-shadow: none; }
.group-search input { flex: 1; min-width: 0; }

/* -- New group and edit form ------------------------------------------- */
.group-form { max-width: 720px; }
.privacy-choices { display: grid; gap: 8px; box-shadow: none; }
.privacy-choice { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 2px inset var(--sb-bevel); background: var(--sb-paper); cursor: pointer; }
.privacy-choice.on { border-style: outset; background: var(--sb-button-hover); }
.privacy-choice input { margin-top: 4px; }
.privacy-choice strong, .privacy-choice small { display: block; }
.privacy-choice small { color: var(--sb-muted); }
.picture-field .row { margin-top: 6px; }
.picture-preview {
  display: flex; align-items: center; justify-content: center; margin-top: 4px; overflow: hidden;
  border: 2px inset var(--sb-bevel); background: var(--sb-hairline); color: var(--sb-muted); font-size: 0.8rem;
}
.picture-preview span { padding: 8px; text-align: center; }
.picture-preview img { width: 100%; height: 100%; display: block; box-shadow: none; }
.picture-preview.avatar { width: 96px; height: 96px; }
.picture-preview.banner { width: 100%; max-width: 480px; height: 100px; }
.picture-field .progress-bar { max-width: 480px; margin-top: 4px; }

/* -- Group page -------------------------------------------------------- */
.group-page { max-width: 1100px; margin: 0 auto; box-shadow: none; }
.group-header { border: 2px ridge var(--sb-ridge); background: var(--sb-panel); margin: 0 0 18px; }
/* Fixed-height banner box; the image is stretched into it. Plain grey when there is none. */
.group-banner { height: 200px; background: var(--sb-hairline); border-bottom: 2px inset var(--sb-bevel); overflow: hidden; box-shadow: none; }
.group-banner img { width: 100%; height: 100%; display: block; box-shadow: none; }
.group-headline { display: flex; align-items: flex-end; gap: 16px; padding: 0 18px 12px; flex-wrap: wrap; box-shadow: none; }
.group-headline .group-avatar { position: relative; margin-top: -40px; }
.group-headline .grow { box-shadow: none; }
.group-headline h1 { margin: 12px 0 6px; font-size: clamp(1.6rem, 4vw, 2.6rem); max-width: none; overflow-wrap: anywhere; }
.group-sub { margin: 0; color: var(--sb-muted); font-size: 0.9rem; }
.group-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; box-shadow: none; }
.group-header .tabs { margin: 0; padding: 6px 14px; border-bottom: 0; border-top: 2px dashed #000; }
:root[data-theme='dark'] .group-header .tabs { border-top-color: #666; }
.group-body { display: grid; grid-template-columns: minmax(0, 640px); gap: 20px; justify-content: center; box-shadow: none; }
.group-body.has-aside { grid-template-columns: minmax(0, 640px) minmax(0, 280px); }
.group-main, .group-aside { min-width: 0; box-shadow: none; }
.group-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.group-locked { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.group-locked p { margin: 0; box-shadow: none; }
.group-facts { margin: 0 0 12px; padding-left: 1.2em; list-style: square; box-shadow: none; }
.group-facts li { margin: 4px 0; box-shadow: none; }
.member-list { box-shadow: none; }
.member-row.pending { background: var(--sb-paper); padding: 8px; }
.member-row .chip { flex-shrink: 0; }
@media (max-width: 1100px) {
  .group-body.has-aside { grid-template-columns: minmax(0, 640px); }
  .group-aside { display: none; }
}
@media (max-width: 640px) {
  .group-banner { height: 120px; }
  .group-headline { padding: 0 10px 10px; gap: 10px; }
  .group-headline .group-avatar.lg { --size: 84px; margin-top: -30px; }
  .group-headline .grow { flex-basis: 100%; }
  .group-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .group-tile-desc { display: none; }
}
@media (max-width: 420px) { .group-grid { grid-template-columns: 1fr; } }

/* Components here toggle `hidden`; keep it winning over display rules like .stack and .btn-small. */
.story-composer [hidden], .picture-field [hidden], .group-form [hidden] { display: none !important; }
.group-main .composer .grow textarea { width: 100%; }