/* wgf-media-toggle.css - the "Picture | 3D" tab pair on a media stage
   (wgf_models3d.media_toggle_html + assets/wgf-media-toggle.js). House tokens only
   (static/css/_tokens.css); the frame around it is the page's own .wgf-window.
   Served under the 1-year immutable /assets/ cache: bump MEDIA_TOGGLE_CSS ?v= on edit.
   A page sets the frame height with --wgf-media-h (default 460px, 320px on a phone). */

/* -- header bar: title left, tabs right, one line always (a long title truncates rather
   than wrapping, so the bar is the same height for every view) ------------------------ */
.wgf-media__head {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-3, .75rem);
  padding-left: var(--space-4, 1rem);
  padding-right: var(--space-2, .5rem);
  text-align: left;
}
.wgf-media__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wgf-media__tabs {
  display: inline-flex;
  flex: none;
  gap: 0;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-well, #08090c);
  box-shadow: 0 0 0 1px var(--wgf-well-edge, #040507);
}
.wgf-media__tab {
  min-width: 4.5rem;
  min-height: 32px;
  margin: 0;
  padding: 4px var(--space-3, .75rem);
  border: 0;
  border-left: 1px solid var(--wgf-metal-soft, #3a3120);
  background: transparent;
  color: var(--wgf-neutral-text, #9b9384);
  font-family: var(--font-game);
  font-size: var(--text-sm, .9rem);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .04em;
  text-shadow: var(--text-ink-outline);
  cursor: pointer;
}
.wgf-media__tab:first-child { border-left: 0; }
.wgf-media__tab[hidden] { display: none; }
.wgf-media__tab:hover:not(:disabled) { color: var(--wgf-text, #f4ecd8); }
.wgf-media__tab[aria-selected="true"] {
  color: var(--wgf-gold, #ffd100);
  background: linear-gradient(#2a2416, #15120b);
  box-shadow: inset 0 -2px 0 var(--wgf-gold, #ffd100);
}
.wgf-media__tab:focus { outline: none; }
.wgf-media__tab:focus-visible {
  outline: 2px solid var(--wgf-gold, #ffd100);
  outline-offset: -2px;
}
.wgf-media__tab:disabled { opacity: .45; cursor: not-allowed; }

/* -- the frame: one fixed box, so switching views never moves the page ---------------- */
.wgf-media { --wgf-media-h: 460px; }
.wgf-media__frame { position: relative; }
.wgf-media--dual .wgf-media__frame { height: var(--wgf-media-h); overflow: hidden; }
.wgf-media__panel { position: relative; }
.wgf-media--dual .wgf-media__panel { height: 100%; }
.wgf-media__panel[hidden] { display: none !important; }
.wgf-media__panel:focus-visible { outline: 2px solid var(--wgf-gold, #ffd100); outline-offset: -2px; }

/* The viewer's status line rides over the bottom of the stage instead of under it, so
   the 3D panel is exactly as tall as the picture panel. */
.wgf-media #wgf-model3d-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  min-height: 0;
  border-top: 0;
  background: linear-gradient(transparent, rgba(8, 9, 12, .85));
  pointer-events: none;
}
.wgf-media #wgf-model3d-status:empty { background: none; padding: 0; }

/* -- notes: both stacked in one cell, the inactive one invisible, so no height change -- */
.wgf-media__notes { display: grid; }
.wgf-media__notes > .wgf-media__note { grid-area: 1 / 1; }
.wgf-media__note {
  margin: var(--space-2, .5rem) var(--space-1, .25rem) 0;
  color: var(--wgf-neutral-text, #9b9384);
  font-size: .78rem;
}
.wgf-media__note.is-off { visibility: hidden; }

@media (max-width: 700px) {
  .wgf-media { --wgf-media-h: 320px; }
  .wgf-media__head { padding-left: var(--space-3, .75rem); }
  .wgf-media__tab { min-width: 3.75rem; }
}