/* This panel's own rules: the few things agent-design-studio's stylesheet (admin/ads.css, vendored
   by scripts/vendor-ads-admin-css.mjs) has no class for. Everything else on /admin is ADS's markup
   with ADS's classes. */

/* ADS measures its app chrome with a ResizeObserver; here the top bar is a fixed 44 px. */
:root {
  --app-chrome-height: 44px;
}

/* Instructions: the workflow diagram (admin/src/ui/instructions.js). Its cells come phase by phase,
   each phase's title, facilitator, handoff and participant in turn. Below 64rem that is the layout:
   one column, read top to bottom, with a rule between phases. From 64rem up (ADS's lg) the same
   cells fill four columns a column at a time, so each lane lines up across the phases, and an
   arrow in the gap leads from each phase's box to the next. */
.workflow-diagram {
  display: grid;
  gap: 0.75rem;
}

.workflow-diagram > .workflow-phase:not(:first-child) {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.workflow-number {
  font-variant-numeric: tabular-nums;
}

@media (min-width: 64rem) {
  .workflow-diagram {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: 2rem;
  }

  .workflow-diagram > .workflow-phase:not(:first-child) {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .workflow-cell {
    position: relative;
  }

  .workflow-cell:not([data-phase="after"])::after {
    content: "→";
    content: "→" / "";
    position: absolute;
    top: 50%;
    right: -1.5rem;
    width: 1rem;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #000;
  }
}

/* Print the join sheet alone. ADS's own print utilities only hide the sheet's buttons, so its print
   comes out as the clipped admin page; here everything but the card is hidden and the card flows
   from the top of the page. */
@media print {
  html,
  body,
  main {
    height: auto !important;
    overflow: visible !important;
  }

  body * {
    visibility: hidden;
  }

  .join-sheet-card,
  .join-sheet-card * {
    visibility: visible;
  }

  .join-sheet-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* The Instructions tab's "Run a model yourself" tutorial: numbered steps (ADS's preflight resets
   list styles, and its build has no list-decimal utility). */
.tutorial-steps {
  list-style: decimal;
}