/* Depends on: tokens.css -- linked as a separate <link> by every page that uses this file, never
   @import-ed (test_template_lint). Historias: spec docs/superpowers/specs/2026-10-02-stories-design.md.
   Sections: tray and rings (here), frame and composer, viewer. */

/* ---------- Tray ---------- */
.st-tray-wrap { margin: 0 0 14px; }
.st-tray { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.st-tray::-webkit-scrollbar { display: none; }
.st-tray[hidden] { display: none; }
.st-tray > li { position: relative; flex: 0 0 auto; }
.st-circle { width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-primary); text-align: center; }
.st-ring { position: relative; display: block; width: 68px; height: 68px; padding: 2px; border-radius: 50%; background: var(--line); }
.st-circle.is-unseen .st-ring { padding: 3px; background: conic-gradient(var(--accent), var(--accent-strong), var(--accent)); }
.st-new .st-ring { background: none; border: 1.5px dashed var(--line-hover, var(--line)); }
.st-img { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface-2); }
.st-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-initial { font-weight: 800; font-size: 22px; color: var(--text-secondary); }
.st-name { max-width: 72px; font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-plus, .st-add {
  position: absolute; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--accent); color: #04150c; font-weight: 800; font-size: 16px; line-height: 1;
}
.st-plus { right: -2px; bottom: -2px; }
.st-add { left: 48px; top: 48px; }

/* Reels top bar: up to three overlapping avatars. The bar sits on video, hence fixed colours. */
.st-tray-wrap.is-compact { margin: 0; }
.st-stack { display: inline-flex; align-items: center; padding: 2px; }
.st-stack-av {
  display: grid; place-items: center; width: 30px; height: 30px; margin-left: -10px; overflow: hidden;
  border-radius: 50%; border: 2px solid #000; background: var(--surface-2); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.st-stack-av:first-child { margin-left: 0; }
.st-stack-av.is-unseen { box-shadow: 0 0 0 2px var(--accent); }
.st-stack-av img { width: 100%; height: 100%; object-fit: cover; }
.st-stack-av .st-initial { font-size: 13px; }
.st-stack-new { justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #04150c; font-weight: 800; }

/* Profile avatar: Instagram's cue that stories are waiting -- a thick gradient ring, a dark gap
   between it and the photo, a soft pulse and a "Historia" chip. The profile also shows the
   highlights' thinner ring right below, so this one has to read as different at a glance. A seen
   ring stays (it still opens the stories) but drops to a thin light-green line, so an active story
   is always visible, even to its own author. */
.st-avatar-link { position: relative; display: block; margin: -6px; padding: 6px; border-radius: 50%; background: #7dffc0; }
.st-avatar-link .avatar-photo { outline: 4px solid var(--ink); }
.st-avatar-link.is-unseen {
  margin: -8px -8px 0; padding: 8px; background: conic-gradient(var(--accent), var(--accent-strong), #7dffc0, var(--accent));
  box-shadow: 0 0 18px rgba(0, 230, 118, 0.35); animation: st-ring-pulse 2.4s ease-out infinite;
}
.st-avatar-chip {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--accent); color: #04150c; font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
.st-avatar-link:not(.is-unseen) .st-avatar-chip { display: none; }
@keyframes st-ring-pulse {
  0% { box-shadow: 0 0 18px rgba(0, 230, 118, 0.35), 0 0 0 0 rgba(0, 230, 118, 0.45); }
  70%, 100% { box-shadow: 0 0 18px rgba(0, 230, 118, 0.35), 0 0 0 14px rgba(0, 230, 118, 0); }
}
@media (prefers-reduced-motion: reduce) { .st-avatar-link.is-unseen { animation: none; } }
/* The owner's "+" sits at the avatar's lower right: the lower left is the photo-upload camera
   (profile.css .sidebar-avatar-upload), which would otherwise paint over it. */
.st-add.st-add-avatar { left: auto; right: 2px; top: auto; bottom: 2px; width: 28px; height: 28px; font-size: 18px; z-index: 3; }

/* ---------- Frame shared by viewer, composer and story page ---------- */
.st-frame { position: relative; overflow: hidden; background: #000; color: #fff; container-type: inline-size; }
.st-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.st-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(30px) brightness(0.45) saturate(1.15); transform: scale(1.15); pointer-events: none;
}
.st-photo, .st-video { position: relative; width: 100%; height: 100%; object-fit: contain; }
.st-layers { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: inline-size; }

/* ---------- Composer ---------- */
/* Room under the page for the phone's fixed bottom nav (--rail-h) and the floating theme toggle. */
.st-compose-page { max-width: 520px; margin: 0 auto; padding: 16px 16px calc(var(--rail-h, 0px) + 84px); }
.st-compose { display: flex; flex-direction: column; gap: 12px; }
.st-compose-head { display: flex; align-items: center; gap: 8px; }
.st-compose-head h1 { margin: 0; font-size: 18px; }
.st-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.st-icon svg { width: 24px; height: 24px; }
.st-compose-cancel { color: var(--text-primary); }
.st-compose-cancel svg { width: 22px; height: 22px; }
.st-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--critical-soft); color: var(--critical); font-size: 13.5px; }
.st-error[hidden] { display: none; }
.st-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-pick[hidden] { display: none; }
.st-hint { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.st-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--text-primary); font: inherit; font-size: 14px; cursor: pointer;
}
.st-btn[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent); }
.st-btn-primary { border-color: var(--accent); background: var(--accent); color: #04150c; font-weight: 700; }
.st-btn:disabled { opacity: 0.5; cursor: default; }
.st-js-only, .st-file-hidden { display: none; }
.st-compose.is-enhanced .st-js-only { display: inline-flex; }
.st-compose.is-enhanced #st-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.st-nojs-text { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.st-compose-stage[hidden] { display: none; }
.st-compose-stage .st-frame {
  width: min(100%, calc(70vh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto 10px;
  border-radius: var(--radius-lg); touch-action: none;
}
.st-tools, .st-compose-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-tools[hidden], .st-trim[hidden] { display: none; }
.st-text-toolbar { margin-top: 4px; }
.st-trim { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13px; }
.st-trim-head { display: flex; justify-content: space-between; color: var(--text-secondary); }
.st-trim-row { display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; gap: 8px; }
.st-progress { height: 4px; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.st-progress[hidden] { display: none; }
.st-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.2s; }
.st-compose-foot { justify-content: flex-end; }
.st-compose-foot [hidden] { display: none; }

/* ---------- Story page (no-JS fallback) and the unavailable page ---------- */
.st-page { max-width: 520px; margin: 0 auto; padding: 16px 16px calc(var(--rail-h, 0px) + 84px); }
.st-page-head, .st-page-nav { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; font-size: 14px; }
.st-page .st-page-frame { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); }
.st-page .st-page-frame .st-video { pointer-events: auto; }
.st-unavailable { max-width: 520px; margin: 60px auto; padding: 16px; text-align: center; }
.st-unavailable p { color: var(--text-secondary); }

/* ---------- Viewer ---------- */
/* 210: above the Galería viewer (200) and everything it sits above. Fixed white controls: the
   overlay is near-black in both themes (galeria_viewer.css I7). */
.st-overlay[hidden] { display: none; }
.st-overlay { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 8, 0.97); }
body.st-open { overflow: hidden; }
.st-overlay .st-viewer-frame {
  width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9));
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.st-viewer-frame img { -webkit-user-drag: none; user-drag: none; }
.st-media.is-loading::after {
  content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent); animation: st-spin 0.7s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 28px; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.st-bars { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.st-bars li { flex: 1 1 0; min-width: 0; }
.st-bar { position: relative; display: block; width: 100%; height: 14px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.st-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.st-bar span { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: left center; }
.st-head { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.st-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; }
.st-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-weight: 800; }
.st-avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-head-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.st-age { flex: none; color: rgba(255, 255, 255, 0.75); }
.st-head-actions { display: flex; align-items: center; margin-left: auto; }
.st-overlay .st-icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.st-icon[hidden] { display: none; }
.st-sound .st-ico-off { display: none; }
.st-sound.is-muted .st-ico-on { display: none; }
.st-sound.is-muted .st-ico-off { display: block; }
.st-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: flex-end;
  padding: 40px 14px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45)); pointer-events: none;
}
.st-kudos { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: none; color: #fff; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.st-kudos[hidden] { display: none; }
.st-kudos svg { width: 32px; height: 32px; }
.st-kudos.on svg { fill: var(--amber); stroke: var(--amber); }
.st-menu {
  position: absolute; z-index: 6; top: 64px; right: 10px; display: flex; flex-direction: column; min-width: 190px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); color: var(--text-primary); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.st-menu[hidden] { display: none; }
.st-menu button { padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.st-menu button:hover, .st-menu button:focus-visible { background: var(--surface-2); }
.st-menu .is-danger { color: var(--critical); }
.st-sheet {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; max-height: 62%; overflow-y: auto;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; background: var(--surface); color: var(--text-primary);
}
.st-sheet[hidden] { display: none; }
.st-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.st-sheet-close { border: 0; background: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; }
.st-sheet-count { margin: 0 0 10px; color: var(--text-secondary); font-size: 13px; }
.st-viewers { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-viewers li { display: flex; align-items: center; gap: 10px; }
.st-viewer-kudos { margin-left: auto; color: var(--amber); }
.st-viewer-kudos svg { width: 18px; height: 18px; fill: currentColor; }
.st-report { display: flex; flex-direction: column; gap: 10px; }
.st-report select, .st-report textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text-primary); font: inherit; }
.st-sheet-reply { margin: 0; color: var(--text-secondary); font-size: 13px; }
.st-notice, .st-tap-play { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.st-notice { padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.7); font-size: 13px; }
.st-tap-play { padding: 12px 18px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font: inherit; cursor: pointer; }
.st-notice[hidden], .st-tap-play[hidden] { display: none; }
.st-nav { display: none; }
@media (min-width: 641px) {
  .st-overlay .st-viewer-frame { width: calc(92vh * 9 / 16); height: 92vh; border-radius: var(--radius-lg); }
  .st-nav { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 18px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 30px; cursor: pointer; }
  .st-nav:hover { background: rgba(255, 255, 255, 0.22); }
}
/* Holding: the chrome steps aside, Instagram-style. */
.st-overlay.is-holding .st-top, .st-overlay.is-holding .st-bottom { opacity: 0; transition: opacity 0.15s; }
@keyframes st-in-right { from { transform: translateX(30%); opacity: 0.4; } }
@keyframes st-in-left { from { transform: translateX(-30%); opacity: 0.4; } }
.st-viewer-frame.st-in-right { animation: st-in-right 0.22s ease-out; }
.st-viewer-frame.st-in-left { animation: st-in-left 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .st-viewer-frame.st-in-right, .st-viewer-frame.st-in-left { animation: none; }
}

/* Reply to a story (DM Phase 2): a line at the bottom, and a send button beside the nitro. */
.st-bottom { align-items: center; gap: 8px; }
.st-reply { flex: 1; display: flex; gap: 8px; pointer-events: auto; }
.st-reply[hidden] { display: none; }
.st-reply-input {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.35); color: #fff; font: inherit; font-size: 14px;
}
.st-reply-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.st-reply-send { border: 0; background: none; color: #fff; font-weight: 700; cursor: pointer; }

/* Car tags (car_tags): chip on tagged content, picker in the composer. */
.car-chip { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; }
.car-tag-picker { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.car-tag-picker legend { float: left; padding: 0; margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }