/* Workspace overview — S4 #10 (blocking): every other class this module uses (.glass .panel
   .eyebrow .three .crumbs .badge .muted .note .nav .headrow .rv-btn) already exists in
   design-system/components.css and style.css. Only .phases and .table are missing, so only those
   two ship here, .rv-scoped, built from the existing tokens. Nothing else is restyled. */

.rv .phases { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.rv .phases button {
  min-height: 34px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer;
  border-radius: var(--r-button); border: 1px solid var(--glass-edge);
  background: transparent; color: inherit; box-shadow: none;
}
.rv .phases button.on {
  background: var(--nav-active); box-shadow: var(--shadow-nav-active); border-color: var(--glass-edge);
}

.rv .table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rv .table th, .rv .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--glass-edge); vertical-align: top; }
.rv .table th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.rv .table tr:last-child td { border-bottom: 0; }
.rv .table td button { min-height: 30px; }

@media (max-width: 760px) {
  /* Narrow: the table scrolls inside its own row rather than widening the page. */
  .rv .table { display: block; overflow-x: auto; }
  .rv .phases button { flex: 1 1 auto; }
}

/* Context crumbs inside the overview only.
   components.css:113 sets `.rv .crumbs{display:none}` below 760px — written for the top bar, where
   the crumb is a repeat of what the header already says. The overview's crumbs are the only place
   the current project and assessment are named, so they must survive at 390. The id raises
   specificity above `.rv .crumbs`, so this holds at every width without a media query and without
   touching the global class: nothing here selects a bare `.crumbs`. */
.rv #overview .crumbs {
  display: flex;
  flex-wrap: wrap;        /* wrap instead of widening the page */
  align-items: center;
  gap: var(--gap-pip);
  min-width: 0;
  overflow-wrap: anywhere; /* a long project name breaks rather than overflowing */
  word-break: normal;
}
.rv #overview .crumbs > * { min-width: 0; max-width: 100%; }
/* The overview's crumbs are buttons (they re-select through the existing selects), so the
   anchor rules in components.css do not reach them. Same look, scoped to this root. */
.rv #overview .crumbs button {
  font: inherit;
  font-size: 13px;
  color: var(--secondary);
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  padding: 4px 6px;
  min-height: 28px;
  border-radius: var(--r-linkbox);
  overflow-wrap: anywhere;
}
.rv #overview .crumbs button:hover { background: var(--chip-fill); color: var(--ink); }
.rv #overview .crumbs button[aria-current] { color: var(--ink); font-weight: 600; }
.rv #overview .crumbs .sep { opacity: .6; flex: 0 0 auto; }  /* separators stay at every width */
.rv #overview .crumbs .badge { flex: 0 0 auto; }             /* the role badge stays on the row */

/* ---------------------------------------------------------------------------------------------
   Composition by state (S4 #13 as amended). The module sets body[data-overview-state] to
   none | all | project | assessment and nothing else outside its roots. Everything below is
   presentation: it hides generic chrome that repeats what the overview already says, quiets the
   cards that have no role in the current state, and orders the ones that do. No node is removed,
   no hidden attribute is written, no authority flag is touched, and `none` (signed out, shared
   route, or no project grants) has no rules at all — the landing and participant routes are
   exactly as they were.
   Never display:none on the card that holds the only path to the next state: #project-card stays
   in 'all' and in 'project', #assessment-card stays in 'project'.
   --------------------------------------------------------------------------------------------- */

/* The overview is the header once it has something to say, so the generic one stops repeating it. */
body[data-overview-state="all"] #workspace > .headrow,
body[data-overview-state="project"] #workspace > .headrow,
body[data-overview-state="assessment"] #workspace > .headrow,
body[data-overview-state="all"] #workspace > .introduction,
body[data-overview-state="project"] #workspace > .introduction,
body[data-overview-state="assessment"] #workspace > .introduction,
body[data-overview-state="all"] #facilitator > h2,
body[data-overview-state="project"] #facilitator > h2,
body[data-overview-state="assessment"] #facilitator > h2 { display: none; }

/* Compact: a selector strip beneath the overview, not a second workspace. Nothing is hidden. */
body[data-overview-state="all"] #project-card,
body[data-overview-state="project"] #project-card,
body[data-overview-state="project"] #assessment-card,
body[data-overview-state="assessment"] #project-card,
body[data-overview-state="assessment"] #assessment-card {
  font-size: 14px; padding: 12px 14px; opacity: .92;
}
body[data-overview-state="all"] #project-card > h3,
body[data-overview-state="project"] #project-card > h3,
body[data-overview-state="project"] #assessment-card > h3,
body[data-overview-state="assessment"] #project-card > h3,
body[data-overview-state="assessment"] #assessment-card > h3 { font-size: 15px; margin: 0 0 6px; }

/* A — All projects. The grid leads with the one card that reaches the next state. */
body[data-overview-state="all"] #assessment-card,
body[data-overview-state="all"] #survey-card,
body[data-overview-state="all"] #results-card,
body[data-overview-state="all"] #reports-card { display: none; }
body[data-overview-state="all"] #project-card { order: 1; }

/* B — Project. The overview's table leads; the selects stay reachable beneath it. */
body[data-overview-state="project"] #survey-card,
body[data-overview-state="project"] #results-card,
body[data-overview-state="project"] #reports-card { display: none; }
body[data-overview-state="project"] #project-card { order: 1; }
body[data-overview-state="project"] #assessment-card { order: 2; }

/* C — Assessment. Phase visibility belongs to the root composition; only order is set here.
   Reports come before the legacy Results block, and the selector cards follow the phase content. */
body[data-overview-state="assessment"] #reports-card { order: 2; }
body[data-overview-state="assessment"] #results-card { order: 3; }
body[data-overview-state="assessment"] #project-card { order: 8; }
body[data-overview-state="assessment"] #assessment-card { order: 9; }