/* Final responsive layer for the mounted workbench. Keep this stylesheet last
   in the hosted roster: it deliberately supersedes older view-local mobile
   rules so the shell and every card collection share the same breakpoints. */

.universe-app-root .navigation-toggle,
.universe-app-root .header-search-button,
.universe-app-root .navigation-scrim {
  display: none;
}
.universe-app-root .navigation-scrim[hidden] {
  display: none;
}
/* The header wraps rather than running off the side. It only ever wraps
   when its own parts do not fit, so a full-width desktop header is still
   one row. */
.universe-app-root .topbar {
  flex-wrap: wrap;
  row-gap: 7px;
}
.universe-app-root .context-side {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.universe-app-root .shell-search {
  display: flex;
  min-width: 0;
  align-items: center;
}
.universe-app-root .header-search-button,
.universe-app-root .navigation-toggle {
  min-width: 38px;
  min-height: 38px;
  border: 1px solid var(--yoke-border);
  border-radius: 8px;
  background: var(--yoke-surface);
  color: var(--yoke-ink-2);
  cursor: pointer;
  font: 600 11px/1 var(--yoke-font-sans);
}
.universe-app-root .header-search-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: auto;
}
.universe-app-root .header-context-control {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  height: 32px;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--yoke-border);
  border-radius: 9px;
  background: var(--yoke-bg);
}
.universe-app-root .header-context-control[hidden] { display: none; }
.universe-app-root .header-context-label {
  flex: 0 0 auto;
  color: var(--yoke-muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}
.universe-app-root .header-context-value {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
}
.universe-app-root .header-scope-host {
  min-width: 0;
  max-width: 100%;
}
.universe-app-root .header-scope-host .scope-bar {
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
/* The control is already captioned PROJECTS, so its own label is noise —
   except on a single-project screen, where a second chip row sits under the
   first and only its label says what the difference is. */
.universe-app-root .header-scope-host > .scope-bar > .scope-label {
  display: none;
}
.universe-app-root .header-scope-host .scope-bar .scope-bar > .scope-label {
  flex: 0 0 auto;
  margin-right: 5px;
}
.universe-app-root .header-scope-host .scope-chip {
  flex: 0 0 auto;
  padding: 2px 10px;
  font-size: 11.5px;
  line-height: 1.2;
}

/* Card collections size columns from the grid's own inline size, not the
   viewport, and auto-fill keeps the columns a section did not fill. auto-fit
   collapsed them, so one card became one full-width track and three became
   thirds while the section below drew four; sections are read as a set, so
   their columns line up whatever each one holds. min(100%, min-track) stacks
   on a pane narrower than the track without clipping. Fractional tracks
   distribute leftover width to the right edge while empty slots preserve
   matching column edges across sparse and populated sections.
   With a 1fr maximum, auto-fill counts columns from the minimum, so the
   minimum is the width a card actually gets wherever one more column only
   just fits. Each collection's minimum is therefore the narrowest width its
   own content reads at, not a phone floor. */
.universe-app-root {
  --yoke-card-track-min: 268px;
  --yoke-card-track-max: 1fr;
  --yoke-card-grid-gap: 12px;
}
.universe-app-root .session-grid,
.universe-app-root .work-card-grid,
.universe-app-root .work-session-grid,
.universe-app-root .strategy-doc-grid,
.universe-app-root .machines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(
    min(100%, var(--yoke-card-track-min)), var(--yoke-card-track-max)
  ));
  gap: var(--yoke-card-grid-gap);
}
/* A session card carries an identity row, a steering row and a message row
   that each read on one line from about 310px. */
.universe-app-root .session-grid,
.universe-app-root .work-session-grid {
  --yoke-card-track-min: 320px;
}
.universe-app-root .strategy-doc-grid {
  --yoke-card-track-min: 280px;
  --yoke-card-grid-gap: 10px;
}
.universe-app-root .machines-grid {
  --yoke-card-track-min: 340px;
}
.universe-app-root .navigation-toggle {
  padding: 9px;
}
.universe-app-root .navigation-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  margin: 3px auto;
  border-radius: 2px;
  background: currentColor;
}

@media (max-width: 1180px) {
  .universe-app-root .shell { grid-template-columns: 204px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .universe-app-root .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 34px;
  }
  .universe-app-root .workbench-body {
    grid-column: 1;
    grid-row: 1;
  }
  .universe-app-root .app-footer {
    grid-column: 1;
    grid-row: 2;
  }
  .universe-app-root .shell > .sidenav {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    display: flex;
    width: min(292px, calc(100% - 44px));
    min-height: 0;
    max-height: 100dvh;
    flex-direction: column;
    padding: 12px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--yoke-border);
    border-bottom: 0;
    box-shadow: var(--yoke-shadow);
    transform: translateX(-105%);
    transition: transform 160ms ease;
  }
  .universe-app-root .shell.side-open > .sidenav { transform: translateX(0); }
  .universe-app-root .navigation-scrim {
    position: fixed;
    z-index: 40;
    inset: 0;
    display: block;
    width: 100%;
    border: 0;
    background: color-mix(in srgb, var(--yoke-ink) 25%, transparent);
  }
  body.side-open { overflow: hidden; }
  .universe-app-root .navigation-toggle,
  .universe-app-root .header-search-button { display: block; }
  /* The context group stops being one unbreakable block: its three controls
     lay out directly in the header so the header's own wrapping can move
     them onto a second row instead of pushing the last one off the side. */
  .universe-app-root .context-side {
    display: contents;
  }
  /* A single-project screen carries two pickers in this one control — the
     projects in scope, and which of them is focused. Side by side they are
     wider than the header has room for here, and neither could shrink, so
     the header ran past the screen edge and took the actor control off it.
     The focus picker takes its own line, the control grows to hold it
     rather than clipping at a fixed height, and each chip row scrolls
     inside itself. */
  .universe-app-root .header-project-context {
    height: auto;
    min-height: 32px;
    flex-wrap: wrap;
    padding: 4px 10px;
    row-gap: 6px;
  }
  .universe-app-root .header-scope-host > .scope-bar {
    flex-wrap: wrap;
    row-gap: 6px;
    min-width: 0;
  }
  .universe-app-root .header-scope-host .scope-bar .scope-bar {
    flex: 1 1 100%;
    min-width: 0;
    overflow-x: auto;
  }

  /* The wide field gives up its space to the icon button, which opens the
     same dialog: search survives the narrow bar instead of disappearing with
     the room the field needed. */
  .universe-app-root .brand,
  .universe-app-root .header-search,
  .universe-app-root .actor-kind { display: none; }
  .universe-app-root .content {
    padding: 20px 20px 32px;
  }
  .universe-app-root .stat-row,
  .universe-app-root .sessions-stats,
  .universe-app-root .frontier-stats > .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .universe-app-root .work-item-card-head,
  .universe-app-root .strategy-doc-card-head,
  .universe-app-root .shipping-run-card-head,
  .universe-app-root .session-top,
  .universe-app-root .machine-head,
  .universe-app-root .machine-surface-head {
    flex-wrap: wrap;
  }
  .universe-app-root .strategy-doc-age,
  .universe-app-root .machine-meta {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .universe-app-root .topbar {
    gap: 6px;
    padding: 8px;
  }
  /* Context controls keep their content width and wrap in reading order. */
  .universe-app-root .header-context-control { gap: 3px; padding-inline: 5px; }
  .universe-app-root .header-universe-context { order: 10; }
  .universe-app-root .header-actor-context { order: 11; }
  .universe-app-root .header-project-context { flex: 0 1 auto; order: 12; }
  .universe-app-root button.actor-chip { font-size: 12.5px; min-height: 22px; }
  /* A phone has no room for a panel floating over a page: the dialog IS the
     screen here, so it fills it rather than centring inside a viewport it
     already covers. */
  .universe-app-root .header-search-overlay {
    align-items: stretch;
    padding: 0;
  }
  .universe-app-root .header-search-panel {
    max-width: none;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .universe-app-root .content { padding: 16px 12px 26px; }
  .universe-app-root .band-section { margin-bottom: 18px; }
  .universe-app-root .band-section-body { gap: 12px; }
  .universe-app-root .stat-row,
  .universe-app-root .sessions-stats,
  .universe-app-root .frontier-stats > .metric-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .universe-app-root .app-footer {
    gap: 8px;
    padding-inline: 10px;
  }
  .universe-app-root .app-footer-mark,
  .universe-app-root .app-footer-environment { display: none; }
}

@media (hover: none) {
  .universe-app-root button,
  .universe-app-root .nav-link,
  .universe-app-root .item-button { min-height: 40px; min-width: 40px; }
  .universe-app-root .header-context-control { min-height: 40px; }
  /* Context chips fit the same 22px circle as the actor avatar. */
  .universe-app-root .header-scope-host .scope-chip {
    height: 22px;
    min-height: 22px;
    padding-block: 0;
  }
  .universe-app-root .activation-dismiss { opacity: 1; }
  /* Touch has no persistent hover state. */
  .universe-app-root .strategy-doc-card:hover {
    border-color: var(--yoke-border);
    box-shadow: none;
  }
}