/* Request stories strip + full-screen viewer (js/request_stories.js).
   Black and white only, like the rest of Roladel; inverted in html.dark. */

.rq-stories {
  --rqs-ink: #000;
  --rqs-paper: #fff;
  --rqs-muted: #6b6b6b;
  --rqs-seen: #c8c8c8;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 4px 0 0;
  overflow: hidden;
}
html.dark .rq-stories { --rqs-ink: #fff; --rqs-paper: #121212; --rqs-muted: #a0a0a0; --rqs-seen: #4a4a4a; }

.rq-stories-title { font-size: 15px; font-weight: 700; margin: 0 16px 8px; color: var(--rqs-ink); }
.rq-stories-status { margin: 0 16px; font-size: 13px; color: var(--rqs-muted); }
.rq-stories-status:empty { display: none; }
.rq-stories-retry { margin-left: 8px; border: 1px solid var(--rqs-ink); background: transparent; color: var(--rqs-ink); border-radius: 999px; padding: 2px 12px; font-size: 13px; }

.rq-stories-strip {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 6px 16px 6px; /* room for the announcement's outer ring */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rq-stories-strip::-webkit-scrollbar { display: none; }
.rq-story { flex: 0 0 auto; scroll-snap-align: start; }
.rq-story-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--rqs-ink);
}
.rq-story-btn:focus-visible { outline: 2px solid var(--rqs-ink); outline-offset: 3px; border-radius: 12px; }
.rq-story-ring {
  position: relative; display: block; width: 68px; height: 68px; border-radius: 50%;
  padding: 3px; background: var(--rqs-ink);
}
.rq-story-ring.is-seen { background: var(--rqs-seen); }
/* Admin announcement circle: a double ring (paper gap + outer ring), so it
   reads as Roladel's own story rather than a buyer request. */
.rq-story-ring.is-announcement { box-shadow: 0 0 0 2px var(--rqs-paper), 0 0 0 4px var(--rqs-ink); }
.rq-story-ring.is-announcement.is-seen { box-shadow: 0 0 0 2px var(--rqs-paper), 0 0 0 4px var(--rqs-seen); }
.rq-story-btn-announcement .rq-story-face { font-family: 'Times New Roman', serif; font-style: italic; font-size: 26px; }
.rq-story-btn-announcement .rq-story-label { font-weight: 700; }
.rq-story-face {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 50%; border: 2px solid var(--rqs-paper); background: var(--rqs-paper);
  overflow: hidden; font-weight: 700; font-size: 22px; color: var(--rqs-ink);
}
.rq-story-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-story-count {
  position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--rqs-ink); color: var(--rqs-paper); border: 2px solid var(--rqs-paper);
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.rq-story-label {
  max-width: 76px; font-size: 12px; line-height: 1.25; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- viewer */
html.rq-sv-lock, html.rq-sv-lock body { overflow: hidden !important; }

/* Below Bootstrap's modal backdrop (1040), so the existing offer modals
   open on top of the story. */
.rq-sv {
  position: fixed; inset: 0; z-index: 1039;
  background: #000; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.rq-sv[hidden] { display: none; }

/* While a story is open, the site's fixed bars - the desktop header with its
   search (z-index 9998) and, once the page is scrolled, the mobile search bar
   (z-index 9999) - would sit on top of the viewer and cover its progress,
   avatar and close button. They are hidden (not removed, so nothing on the
   page moves or scrolls) until the viewer closes. */
html.rq-sv-lock nav.desktop-only-header,
html.rq-sv-lock .pro-mobile-search.search-fixed { visibility: hidden !important; }

/* Phones: the strip right under the header's search bar (moved there by
   js/request_stories.js). */
.rq-stories-mobile-slot { padding: 12px 15px 0; } /* the page container's side padding it had in its own place */
.rq-stories-mobile-slot .rq-stories { margin-bottom: 4px; }
.rq-sv-frame {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 480px; height: 100%; max-height: 100dvh;
  background: #111; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 600px) { .rq-sv-frame { height: min(860px, 94vh); border-radius: 14px; } }

.rq-sv-progress { display: flex; gap: 4px; padding: 10px 12px 6px; }
.rq-sv-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.rq-sv-fill { display: block; width: 0; height: 100%; background: #fff; }

.rq-sv-head { display: flex; align-items: center; gap: 10px; padding: 4px 12px 8px; }
.rq-sv-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #333; }
.rq-sv-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rq-sv-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-sv-verified { margin-left: 5px; font-size: 12px; }
.rq-sv-meta { font-size: 12px; color: rgba(255,255,255,.7); }
.rq-sv-close {
  position: relative; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
}
.rq-sv-close:focus-visible, .rq-sv-btn:focus-visible, .rq-sv-file:focus-visible, .rq-sv-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.rq-sv-stage { position: relative; flex: 1; min-height: 0; }
.rq-sv-tap { position: absolute; top: 0; bottom: 0; z-index: 1; border: 0; background: transparent; padding: 0; cursor: pointer; }
.rq-sv-tap-prev { left: 0; width: 30%; }
.rq-sv-tap-next { right: 0; width: 70%; }
.rq-sv-tap:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -4px; }
/* The card scrolls vertically for long requests. A tap on it navigates by
   position (js/request_stories.js); the tap buttons underneath serve
   keyboard and screen-reader users. */
.rq-sv-card {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto; padding: 8px 18px 16px;
  touch-action: pan-y; cursor: pointer;
}
.rq-sv-card.is-gone > *:not(.rq-sv-gone) { opacity: .35; }
.rq-sv-media { margin: 0 0 12px; border-radius: 10px; overflow: hidden; background: #222; }
.rq-sv-media[hidden] { display: none; }
/* Whole picture, never cropped. */
.rq-sv-media img { display: block; width: 100%; max-height: 42vh; object-fit: contain; background: #000; }
.rq-sv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rq-sv-chip { border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.rq-sv-chip-announcement { background: #fff; color: #000; border-color: #fff; font-weight: 700; }
.rq-sv-title { color: #fff; font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; overflow-wrap: anywhere; }
.rq-sv-desc { color: rgba(255,255,255,.9); font-size: 15px; line-height: 1.55; margin: 0 0 14px; overflow-wrap: anywhere; white-space: pre-line; }
.rq-sv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.rq-sv-fact { background: rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.rq-sv-fact dt { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.65); margin: 0; }
.rq-sv-fact dd { font-size: 14px; font-weight: 700; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-sv-gone { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.12); font-weight: 600; }

.rq-sv-actions { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 16px; background: #111; }
.rq-sv-btn {
  display: block; width: 100%; padding: 13px 16px; border: 0; border-radius: 12px;
  background: #fff; color: #000; font-weight: 700; font-size: 16px; text-align: center; text-decoration: none;
}
.rq-sv-btn:hover, .rq-sv-btn:focus { color: #000; text-decoration: none; }
/* Links styled as buttons (announcement actions): the site's html.dark a
   colour (white) must not turn them white-on-white. */
html .rq-sv a.rq-sv-btn, html.dark .rq-sv a.rq-sv-btn, html.dark .rq-sv a.rq-sv-btn:hover { color: #000; }
.rq-sv-btn[disabled] { background: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.rq-sv-apply .rq-applied-pill { display: block; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.5); text-align: center; font-weight: 600; }
.rq-sv-file, .rq-sv img { -webkit-user-drag: none; }
/* Uploaded video: inline, natural aspect ratio, fits the space (letterboxed, never cropped). */
.rq-sv-video { position: relative; background: #000; }
.rq-sv-video video { display: block; width: 100%; height: auto; max-height: 48vh; object-fit: contain; background: #000; }
.rq-sv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; border-radius: 999px; padding: 10px 18px; background: #fff; color: #000; font-weight: 700; }
.rq-sv-play[hidden] { display: none; }
.rq-sv-video-note { margin: 0; padding: 10px 12px; font-size: 13px; color: rgba(255,255,255,.85); }
.rq-sv-video.is-failed video { display: none; }
.rq-sv-files:empty { display: none; }
.rq-sv-files { margin: 12px 0 0; }
.rq-sv-file { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; color: #fff; text-decoration: none; min-width: 0; }
.rq-sv-file:hover, .rq-sv-file:focus { color: #fff; text-decoration: none; border-color: #fff; }
.rq-sv-file-label { font-size: 11px; color: rgba(255,255,255,.65); }
.rq-sv-file-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 360px) {
  .rq-sv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq-sv-title { font-size: 18px; }
}