/* feature-plans/youtube-links-in-messages.md and youtube-leads.md: every
   YouTube style in one file. Loaded with static/js/youtube_popup.js (the
   console shell and the public profile, GrowthLine, project and item
   pages) and by home/index.html for the article poster. The popup builds
   on the photo viewer's .hpz-viewer rules, so photo-viewer.css comes too. */

/* youtube-links-in-messages.md: a YouTube link opens the video in a popup
   (static/js/youtube_popup.js). */
.hpz-yt-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold-dark);
  text-underline-offset: 3px;
}

.hpz-yt-link .fa-solid {
  margin-right: 4px;
  color: var(--gold-dark);
}

/* The preview card under a message with a YouTube link: the thumbnail in
   a fixed 16:9 box (no jump while it loads) with a play badge. */
.hpz-yt-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16 / 9;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2, var(--paper-warm));
  cursor: pointer;
}

.hpz-yt-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hpz-yt-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(38, 34, 31, .78);
  color: #fffdf8;
  font: inherit;
  font-size: .85rem;
  white-space: nowrap;
}

.hpz-yt-card:hover .hpz-yt-card-play {
  background: rgba(38, 34, 31, .92);
}

.hpz-yt-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-light);
}

.hpz-yt-link:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--gold-light);
}

/* youtube-links-in-messages.md: a YouTube link in a message plays here
   (static/js/youtube_popup.js). Same dark viewer, a 16:9 frame as wide as
   the screen allows while the whole video stays in view. */
.hpz-yt-viewer-open {
  text-decoration: none;
}

.hpz-yt-viewer-open:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-light);
}

.hpz-yt-viewer-body {
  justify-content: center;
}

.hpz-yt-viewer-frame {
  width: min(100%, 1280px, calc((100dvh - 96px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.hpz-yt-viewer-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .hpz-yt-viewer[open] {
    padding: 12px 0 0;
  }

  .hpz-yt-viewer .hpz-viewer-top {
    padding: 0 12px;
  }

  .hpz-yt-viewer-body {
    height: 100%;
  }

  .hpz-yt-viewer-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
}

/* C6c: inline YouTube embeds — click-to-load poster. Tonal separation, not
 * a stroke (standing styling rule) — the box reads as a distinct surface
 * against the page purely by background color + inset shadow, matching the
 * console's --surface-field/--field-shadow pattern (static/css/workspace.css)
 * with this page's own token set. No background image / thumbnail is
 * fetched here — that would itself be a request to a YouTube-owned host
 * before the reader has opted in, defeating the point of this design.
 * google-drive-media.md: a `::gdrive[ID]` poster (Google Drive video) looks
 * and behaves the same. */
[data-youtube-id],
[data-gdrive-id] {
  position: relative;
  display: block;
  width: 100%;
  max-width: 740px;
  aspect-ratio: 16 / 9;
  margin: 0 0 18px;
  border-radius: 10px;
  background: var(--paper-warm);
  box-shadow: inset 0 1px 2px rgba(38, 34, 31, .07);
  cursor: pointer;
}

[data-youtube-id]::before,
[data-gdrive-id]::before {
  content: "\25B6";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--paper);
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(73, 54, 18, .18);
  transform: translate(-50%, -50%);
  transition: transform .15s ease;
}

[data-youtube-id]:hover::before,
[data-gdrive-id]:hover::before {
  transform: translate(-50%, -50%) scale(1.06);
}

[data-youtube-id]:focus-visible,
[data-gdrive-id]:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 2px rgba(38, 34, 31, .07), 0 0 0 3px rgba(230, 170, 5, .45);
}

[data-youtube-id].is-playing,
[data-gdrive-id].is-playing {
  cursor: default;
  background: #000;
}

[data-youtube-id].is-playing::before,
[data-gdrive-id].is-playing::before {
  display: none;
}

[data-youtube-id] iframe,
[data-gdrive-id] iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}


/* youtube-leads.md: a journal's lead video. The card in the reader and on
   GrowthLine fills its frame; the thumbnail inside a journal card's
   open-full-screen button is a span (no nested button) with the same look. */
.hpz-yt-card-lead {
  max-width: none;
  margin-top: 0;
}

.hpz-yt-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #26221f;
  cursor: pointer;
}

.hpz-yt-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hpz-yt-preview:hover .hpz-yt-card-play {
  background: rgba(38, 34, 31, .92);
}

/* The picker dialog's thumbnail, once the link checks out. */
.hpz-yt-picker-preview {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-warm, #fbf3e5);
}

.hpz-yt-picker-preview[hidden] {
  display: none;
}

.hpz-yt-picker-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* youtube-leads.md: a write-up's cover video, above its pictures, on the
   project page, the console's View and the full-screen reader. */
.space-item-cover {
  margin: 12px 0 18px;
  border-radius: 12px;
  overflow: hidden;
}

.space-item-cover .hpz-yt-card {
  border-radius: 0;
}

.space-item-cover video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}

/* google-drive-media.md: a picture from Google Drive is shown whole in the
   picker (a video's frame still fills the 16:9 box). */
.hpz-gd-picker .hpz-yt-picker-preview img {
  object-fit: contain;
}

/* Pictures, videos and embeds inside text fit the column they are in, with
   room around them: the journal viewer's text, a journal card's text, and a
   write-up's text (the article page, the console View and the public item
   page). Before (2026-10-23), a large picture in a journal's text, such as
   one from Google Drive, kept its own width and ran past the panel. This file
   is loaded everywhere such text renders, so the rule lives here once. */
.journal-viewer-text img,
.journal-viewer-text video,
.journal-viewer-text iframe,
.journal-card-text img,
.journal-card-text video,
.article-copy img,
.article-copy iframe {
  max-width: 100%;
  height: auto;
}

.journal-viewer-text img,
.journal-card-text img,
.article-copy p > img:only-child {
  display: block;
  margin: 16px auto;
  border-radius: 10px;
}

.journal-viewer-text [data-youtube-id],
.journal-viewer-text [data-gdrive-id],
.journal-viewer-text .hpz-yt-card {
  margin: 16px 0;
}

/* google-drive-media.md: the numbered "how to share the file" steps in the
   Google Drive dialog. */
.hpz-gd-steps {
  margin: 0 0 16px;
  padding: 12px 16px 12px 34px;
  border-radius: 12px;
  background: var(--paper-warm, #fbf3e5);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hpz-gd-steps li + li {
  margin-top: 4px;
}

/* google-drive-picker.md: "Browse my Google Drive" above the paste field. */
.hpz-gd-browse {
  margin: 0 0 16px;
}

.hpz-gd-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hpz-gd-browse-help {
  margin: 8px 0 0;
}

.hpz-gd-share {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
}

.hpz-gd-share input {
  flex: none;
  margin-top: 3px;
}

.hpz-gd-browse-note:empty {
  display: none;
}

.hpz-gd-browse-note {
  margin: 10px 0 0;
}

.hpz-gd-or {
  margin: 18px 0 10px;
  color: var(--muted, #6b5d4a);
  font-size: 0.9rem;
}