/* ------------------------------------------------------------------
   Video template library
   ------------------------------------------------------------------
   Styles for /social-media-maker/video-templates/ only.

   A separate file rather than an addition to social-workspace.css,
   because this page is not the workspace: it is a library listing with
   no canvas, no sidebar and none of the studio's state. It is declared
   in the registry entry's `styles`, so it loads on this page and
   nowhere else.

   Everything here is built from the existing design tokens. No new
   colours, no new radii, no new spacing scale — a second visual
   language for one page is how a product stops looking like one
   product.
   ------------------------------------------------------------------ */

/* ---- Summary strip ----
   Four counts, read from the template data rather than written down.
   Wraps rather than scrolls: at 390px these become two rows of two,
   which is readable, where a horizontal scroll would hide the last
   number behind a gesture nobody makes. */
.sows__summaries {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 1.5rem;
}

.sows__summary {
  flex: 1 1 9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.sows__summaryValue {
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sows__summaryLabel {
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ---- The sequence column is the one that needs care ----
   It holds a chain of twelve or more composition names ("spotlight →
   split halves → editorial → mosaic → centered type"). Left to itself
   that single cell decides the width of the whole table and pushes
   every other column into a sliver. It gets a ceiling and wraps
   instead, so the table keeps its proportions. */
.dashtable__seq {
  max-width: 26rem;
  color: var(--ink-3);
  font-size: .78rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- Second lines inside a cell ----
   Canvas sizes, frame counts and style lists are supporting detail:
   real, useful, and not what the row is about. Set smaller and
   quieter than the value above them rather than given their own
   column, which would widen the table for something read second. */
.dashtable__sub {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ---- Footnote and empty state ---- */
.sows__note {
  margin: 1rem 0 0;
  font-size: .82rem;
  color: var(--ink-3);
  max-width: 62ch;
}

.sows__empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--ink-3);
}

/* ---- Withheld templates ----
   A template that fails validation is dropped from the table above.
   Without this it would be indistinguishable from one that was never
   written, so the failures are listed underneath. Collapsed by default
   because it is diagnostic detail, not page content. */
.sows__diagnostics {
  margin-top: 1.5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--warn-bg);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  font-size: .8rem;
  color: var(--ink-2);
}

.sows__diagnostics summary {
  cursor: pointer;
  font-weight: 600;
}

.sows__diagnostics ul {
  margin: .6rem 0 0;
  padding-left: 1.1rem;
}

.sows__diagnostics li {
  margin: .25rem 0;
}

/* ---- Narrow screens ----
   The table is the one element that cannot reflow honestly: a scene
   sequence has no meaning once its order is lost. It scrolls inside
   its own container so the page itself never scrolls sideways. */
@media (max-width: 900px) {
  .dashtable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dashtable__seq {
    max-width: 16rem;
  }
}

@media (max-width: 620px) {
  .sows__summary {
    flex: 1 1 calc(50% - .5rem);
  }

  .sows__summaryValue {
    font-size: 1.15rem;
  }
}