/* Demo preview only (scripts/Build-ProductionStudioDemo.ps1 links it after the bundle).
   The "Демо-режим" banner sits fixed at the bottom of the viewport, so the sticky header, the
   session banner and the project drawer keep the offsets the real shell gives them. Colours,
   spacing and type are the shell's tokens (css/tokens.css); nothing here adds a brand value.
   demo-shell.js keeps --demo-banner-height equal to the banner's rendered height. */
:root { --demo-banner-height: 40px; }

body { padding-bottom: var(--demo-banner-height); }

.demo-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-warning-border);
  background: var(--color-warning-subtle);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  text-align: center;
}
.demo-banner-text { font-weight: var(--font-weight-semibold); }
.demo-banner-reset {
  min-height: 0;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--font-size-xs);
}

/* A phone keeps the banner to about two short lines. */
@media (width < 600px) {
  .demo-banner { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); }
}

/* Toasts and the docked project drawer stay above the banner. */
.toast-region { bottom: calc(var(--demo-banner-height) + var(--space-3)); }
.productionstudio-context { bottom: var(--demo-banner-height); }

/* The "Демо" label under the heading of a screen whose actions are simulated. */
.demo-chip { justify-self: start; align-self: start; width: max-content; }

/* Phone fixes for the shell, kept in the demo until the real UI takes them (BAND-003202; the same
   rules as a patch of css/app.css, app-shell.css, navigation-shell.css and tokens.css). Each rule
   has the specificity of the shell rule it overrides and comes after the bundle, so it wins. */
@media (width < 600px) {
  /* The station tabs: two rows of four, name over count, instead of a row scrolled out of sight.
     The bar's height token follows, so the sticky offsets below the header stay right. */
  :root { --size-station-nav: 88px; }
  .productionstudio-nav-row {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
  }
  .productionstudio-nav-row[data-overflow] { mask-image: none; }
  .productionstudio-nav-row [role="tab"]:enabled {
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 var(--space-0-5);
    gap: var(--space-0-5);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
  }

  /* The project switcher: no chevron, and a title of up to two lines before its ellipsis. */
  .context-switcher > .icon:last-child { display: none; }
  .context-switcher-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: var(--line-height-tight);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* The fragment table: each fragment a block (check box, time and length on one line, the
     caption under them) instead of four columns scrolled sideways inside the card. */
  .fragment-table { min-width: 0; }
  .fragment-table, .fragment-table tbody { display: block; }
  .fragment-table colgroup, .fragment-table thead { display: none; }
  .fragment-table tr { display: grid; grid-template-columns: 30px auto 1fr; align-items: center; border-bottom: 1px solid var(--color-divider); }
  .fragment-table td { border-bottom: 0; }
  .fragment-table td:last-child { grid-column: 1 / -1; padding-top: 0; }
}

/* The synthetic clip is drawn in the browser; until it exists the player shows its poster. */
video[data-demo-src] { background: var(--color-media); }