/* ---------------------------------------------------------------------------
   layout.css — app shell, header, workspace, breakpoints. MAIN-THREAD OWNED.
   ---------------------------------------------------------------------------
   Desktop (>=1024px): the run screen is a fixed-viewport console. The rail and
   header stay put, the two panes scroll independently, the log docks at the
   bottom. That is right for a screen somebody watches for half an hour.

   Below 1024px it deliberately REVERTS to normal document scroll and the panes
   become tabs. A fixed-viewport layout on a phone, with an on-screen keyboard
   stealing half the height, is hostile.
--------------------------------------------------------------------------- */

/* ---- mode strip ---------------------------------------------------------- */
.mode-strip {
  position: sticky; top: 0; z-index: var(--z-banner);
  min-height: var(--h-mode);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-sm); font-weight: var(--fw-semi);
  text-align: center;
  background: var(--c-warn-soft); color: var(--c-warn-ink);
  border-bottom: 1px solid rgba(180, 83, 9, .25);
}
.mode-strip:empty { display: none; }
.mode-strip--live { background: var(--c-danger-soft); color: var(--c-danger-ink); border-bottom-color: rgba(185, 28, 28, .3); }
.mode-strip__item { display: inline; }
.mode-strip__item strong { font-weight: var(--fw-bold); letter-spacing: .04em; }
.mode-strip__sep { opacity: .5; margin: 0 var(--s-1); }

@media (max-width: 700px) {
  /* Two clauses will not fit on one phone line. Stacking keeps both readable
     rather than truncating the one that happens to be second. */
  .mode-strip { flex-direction: column; gap: 0; padding: var(--s-1) var(--s-3); line-height: 1.35; }
  .mode-strip__sep { display: none; }
}

/* ---- header -------------------------------------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--h-header); padding: 0 var(--s-4);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.mode-strip:not(:empty) ~ .app-header { top: var(--h-mode); }

.app-brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--c-fg); flex: none; }
.app-brand__mark {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--c-primary);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.app-brand__name { font-weight: var(--fw-bold); font-size: var(--t-md); letter-spacing: -.01em; }

.app-header__context {
  display: flex; align-items: center; gap: var(--s-3);
  min-width: 0; flex: 1 1 auto;
  color: var(--c-fg-muted); font-size: var(--t-sm);
}
.app-header__nav { display: flex; gap: var(--s-1); flex: none; }
.app-nav__link {
  padding: var(--s-1) var(--s-3); border-radius: var(--r-md);
  color: var(--c-fg-muted); text-decoration: none; font-weight: var(--fw-medium);
  transition: background var(--m-fast) var(--m-ease), color var(--m-fast) var(--m-ease);
}
.app-nav__link:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.app-nav__link[aria-current="page"] { background: var(--c-primary-soft); color: var(--c-primary); }
.app-header__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* ---- main ---------------------------------------------------------------- */
.app-main { padding: var(--s-4); }
.screen__title { font-size: var(--t-xl); margin-bottom: var(--s-4); }
.screen[hidden] { display: none !important; }

/* Configure and History are ordinary documents, centred and readable. */
#screen-configure, #screen-history, #screen-error { max-width: 960px; margin: 0 auto; }

/* ---- run screen: the console -------------------------------------------- */
@media (min-width: 1024px) {
  body.screen-run-active { overflow: hidden; }

  .screen--run {
    display: grid;
    grid-template-rows: auto auto 1fr auto;   /* rail, banners, workspace, log */
    gap: var(--s-3);
    height: calc(100dvh - var(--h-header) - var(--mode-h, 0px));
    max-width: none; padding: 0;
  }
  .app-main:has(.screen--run:not([hidden])) { padding: var(--s-3) var(--s-4) 0; }

  .workspace {
    display: grid;
    grid-template-columns: var(--w-dropped) minmax(0, 1fr);
    gap: var(--s-3);
    min-height: 0;   /* without this the grid row refuses to shrink and the
                        panes never get their own scrollbars */
  }
  .pane { min-height: 0; overflow-y: auto; }
  .run-tabs { display: none; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .workspace { grid-template-columns: 240px minmax(0, 1fr); }
}

.pane {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
}
.pane__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.pane__title { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--c-fg-muted); }
.pane__count {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: var(--s-1);
  text-align: center; border-radius: var(--r-pill);
  background: var(--c-primary-soft); color: var(--c-primary);
  font-variant-numeric: tabular-nums; font-weight: var(--fw-semi);
}
.pane__filters { margin-left: auto; display: flex; gap: var(--s-1); align-items: center; }

.lead-stream { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--w-stream); }
.dropped-list { padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }

/* ---- mobile: tabs + document scroll ------------------------------------- */
@media (max-width: 1023px) {
  /* The header is brand + run context + nav + actions. On one 390px row those
     have a combined intrinsic width of ~490px, and because nav and actions are
     flex:none they cannot shrink, so they overlapped each other and pushed the
     document to 489px wide. Wrapping the run context onto its own full-width
     row is what fixes it: nothing is hidden, it just gets the space it needs. */
  .app-header {
    height: auto;
    flex-wrap: wrap;
    row-gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
  }
  .app-brand { order: 1; }
  .app-header__nav { order: 2; margin-left: auto; }
  .app-header__actions { order: 3; }
  .app-header__context {
    order: 4;
    flex: 1 0 100%;
    min-width: 0;
    /* Long run meta scrolls inside itself rather than widening the page. */
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .app-header__context > * { flex: none; }

  .app-main { padding: var(--s-3); }
  .workspace { display: block; }
  .pane { border-radius: var(--r-lg); margin-bottom: var(--s-3); }
  .pane[hidden] { display: none; }

  .run-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: sticky; top: calc(var(--h-header) + var(--h-mode));
    z-index: var(--z-sticky);
    gap: var(--s-1); padding: var(--s-1);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); margin-bottom: var(--s-3);
  }
  .run-tab {
    padding: var(--s-2); border: 0; border-radius: var(--r-md);
    background: transparent; color: var(--c-fg-muted);
    font-size: var(--t-sm); font-weight: var(--fw-medium);
    min-height: 44px;   /* touch target */
  }
  .run-tab[aria-selected="true"] { background: var(--c-primary-soft); color: var(--c-primary); }
  .lead-stream { max-width: none; }
}

/* ---- log dock ------------------------------------------------------------ */
.log-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 0;
}
@media (min-width: 1024px) {
  .log-panel { height: var(--log-h, 180px); max-height: 50vh; margin-bottom: var(--s-3); }
}
@media (max-width: 1023px) {
  .log-panel { max-height: 60vh; }
}

/* ---- modal --------------------------------------------------------------- */
#modal-root:empty { display: none; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s-4);
  background: rgba(20, 32, 26, .45);
}
.modal {
  width: min(640px, 100%); max-height: 85dvh; overflow-y: auto;
  background: var(--c-surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: var(--s-5);
}