/* BeamCue story page — v2. Loads after v2-core.css.
 * One gallery listing: the demo embedded in an iframe, the maker's summary,
 * and the comments underneath. The player itself still lives at /d/<share>/.
 */
.v2-story {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start;
  gap: 40px; padding: 30px 56px 72px;
}
.v2-story-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.v2-story-back {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em; color: var(--fg-3);
}
.v2-story-back:hover { color: var(--fg); }

.v2-story-head { display: flex; flex-direction: column; gap: 16px; }
.v2-story-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.v2-story-head h1 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.05em; line-height: 1.04; max-width: 900px; text-wrap: pretty; }
.v2-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); }
.v2-story-meta .maker { display: flex; align-items: center; gap: 10px; }
.v2-story-meta strong { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; color: var(--fg); }
.v2-story-meta .rule { width: 1px; height: 16px; background: var(--line); }

.v2-avatar {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border: 1px solid var(--line-2); border-radius: var(--radius-round);
  background: var(--bg-4); color: var(--fg);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0;
}
.v2-avatar.me { border-color: var(--sig); background: var(--sig-dim); color: var(--sig); }
.v2-avatar.lg { width: 46px; height: 46px; font-size: 17px; }

.v2-story-notice {
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: var(--bg-2); color: var(--fg-2); font-size: 14px;
}

.v2-story-summary { font-size: 16px; line-height: 1.7; color: var(--fg-2); max-width: 780px; text-wrap: pretty; }

/* ---------- comments ---------- */
.v2-comments { display: flex; flex-direction: column; gap: 20px; padding-top: 30px; border-top: 1px solid var(--line); }
.v2-comments h2 { font-size: 26px; letter-spacing: -0.04em; }
.v2-story-hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); }

.v2-composer { display: flex; gap: 14px; }
.v2-composer-field { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.v2-composer textarea, .v2-comment-edit textarea, .v2-dialog textarea {
  width: 100%; padding: 13px 15px; resize: vertical;
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: var(--bg-2); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.6;
}
.v2-composer textarea::placeholder { color: var(--fg-3); }
.v2-composer-actions { display: flex; align-items: center; gap: 12px; }
.v2-composer-actions .v2-btn { margin-left: auto; }

.v2-comments-guest {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--radius-panel);
  background: var(--bg-2); color: var(--fg-2); font-size: 15px;
}
.v2-comments-guest .v2-btn { margin-left: auto; }

.v2-comment-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.v2-comment { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.v2-comment-body { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.v2-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.v2-comment-head strong { font-size: 15px; font-weight: 700; }
.v2-comment-head time { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); }
.v2-comment-own { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.v2-comment-own .danger { color: var(--danger); }
.v2-comment-own .danger:hover { background: var(--danger-dim); }
.v2-comment-text { font-size: 15px; line-height: 1.66; white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }
.v2-comment-edit { display: flex; flex-direction: column; gap: 10px; }
.v2-comment-edit textarea { border-color: var(--sig); }
.v2-comment-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-comment-foot { display: flex; align-items: center; gap: 8px; }

.v2-like {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-round);
  background: transparent; color: var(--fg-3);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer;
}
button.v2-like:hover { border-color: var(--line-2); color: var(--fg-2); }
.v2-like.on { border-color: var(--sig); background: var(--sig-dim); color: var(--sig); }

.v2-comments-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 46px 20px; border-top: 1px solid var(--line); text-align: center; }
.v2-comments-empty .lead { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.035em; }
.v2-comments-empty p { color: var(--fg-2); font-size: 14px; }

/* ---------- sidebar ---------- */
.v2-story-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.v2-story-manage {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  border: 1px solid var(--sig); border-radius: var(--radius-panel); background: var(--sig-dim);
}
.v2-story-manage p:not(.v2-label) { color: var(--fg-2); font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.v2-story-manage .v2-btn { width: 100%; }
.v2-story-maker, .v2-story-share { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.v2-story-maker .who { display: flex; align-items: center; gap: 12px; }
.v2-story-maker strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.v2-story-link {
  display: flex; align-items: center; gap: 10px; min-height: var(--control-height); padding: 0 8px 0 13px;
  border: 1px solid var(--line-2); border-radius: var(--radius-control); background: var(--bg);
}
.v2-story-link span {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-2);
}

.v2-story-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--line); overflow: hidden;
}
/* A story with no measured length has three stats, and the panel's own fill
   showed through the empty fourth cell as a grey tile. The odd one out takes
   the row instead. */
.v2-story-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.v2-story-stats div { display: flex; flex-direction: column; gap: 5px; padding: 16px; background: var(--bg-2); }
.v2-story-stats strong { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.04em; }
.v2-story-stats span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }

/* Dialogs mirror dashboard-v2.css; the story page loads its own sheet. */
.v2-dialog {
  position: relative; width: min(520px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--radius-panel); background: var(--bg-2); color: var(--fg);
}
.v2-dialog::backdrop { background: oklch(6% 0.02 265 / 0.62); }
.v2-dialog-body { display: grid; gap: 14px; padding: 28px; }
.v2-dialog h2 { font-size: 24px; letter-spacing: -0.04em; }
.v2-dialog p { color: var(--fg-2); font-size: 15px; line-height: 1.62; }
.v2-dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 6px; }

@media (max-width: 1080px) {
  .v2-story { grid-template-columns: minmax(0, 1fr); }
  .v2-story-side { position: static; }
}
@media (max-width: 900px) {
  .v2-story { padding: 20px 18px 48px; gap: 26px; }
  .v2-story-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-composer { flex-direction: column; }
  .v2-composer > .v2-avatar { display: none; }
  .v2-comments-guest .v2-btn { margin-left: 0; }
}

/* Owner-only gallery metadata editor, independent of the Studio project. */
.v2-story-details > summary { cursor: pointer; list-style: none; }
.v2-story-details > summary::-webkit-details-marker { display: none; }
.v2-story-details form { display: grid; gap: 16px; margin-top: 16px; }
.v2-story-details-field { display: grid; gap: 7px; min-width: 0; }
.v2-story-details-field label { font-size: 14px; font-weight: 700; }
.v2-story-details-field .v2-input { width: 100%; min-width: 0; }
.v2-story-details-field textarea { min-height: 112px; resize: vertical; }
.v2-story-details-error { color: var(--danger, #ff827d); font-size: 13px; }
.v2-story-details-error ul { list-style: none; padding: 0; margin: 0; }
.v2-story-details-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-story-details-actions .v2-btn { flex: 1; width: auto; }