/* The shell: tabs, stages, the sign in card, accounts and the activity log.
   Kept separate from styles.css so the screen files can extend that one without three
   people editing the same lines. */

nav.tabs {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 0 1.2rem;
  display: flex;
  gap: .2rem;
  overflow-x: auto;
}
nav.tabs .tab {
  border: none; background: none; border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: .7rem .9rem; color: var(--muted); font-size: .88rem; white-space: nowrap;
}
nav.tabs .tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
nav.tabs .tab:hover { color: var(--ink); }

.card.signin { max-width: 22rem; margin: 3.5rem auto; }

.sub { color: var(--muted); font-size: .78rem; }

.stage {
  display: inline-block; border-radius: 999px; padding: .15rem .6rem;
  font-size: .78rem; background: var(--neutral-soft); color: var(--muted); white-space: nowrap;
}
.stage.with_ra { background: var(--warn-soft); color: var(--warn); }
.stage.with_rnd, .stage.requested { background: var(--accent-soft); color: var(--accent); }
.stage.with_sales { background: var(--ok-soft); color: var(--ok); }
.stage.closed { background: var(--neutral-soft); color: var(--muted); }
.stage.dropped { background: var(--block-soft); color: var(--block); }

table.lines td.act { text-align: right; white-space: nowrap; width: 12rem; }
table.lines tr.off { opacity: .55; }
table.accounts td, table.activity td { vertical-align: top; }
table.activity td:first-child { white-space: nowrap; width: 9rem; }

/* Rows that lead somewhere. */
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--accent-soft); }

@media (max-width: 640px) {
  main { padding: 1rem .8rem 3rem; }
  .row > * { flex: 1 1 100%; }
  nav.tabs { padding: 0 .5rem; }
  table.lines td.act { width: auto; }
}

/* The title is the way home, which is the first thing anybody tries. */
header.bar h1 button.home {
  background: none; border: none; color: inherit; font: inherit; font-weight: 600;
  padding: 0; cursor: pointer; letter-spacing: .02em;
}
header.bar h1 button.home:hover { text-decoration: underline; }

/* Your own name is where people look for their own settings. */
header.bar .who button.whoami {
  background: none; border: none; color: inherit; font: inherit; opacity: .9;
  padding: .2rem .4rem; cursor: pointer;
}
header.bar .who button.whoami:hover { opacity: 1; text-decoration: underline; }

/* Back to the Hub's desk list (2026-10-29), shown only while the Hub door is on. */
header.bar .who a.hublink { color: inherit; padding: .2rem .4rem; text-decoration: none; }
header.bar .who a.hublink:hover { text-decoration: underline; }

/* All pages (2026-10-29): every page of the role at once, wrapping, no scrolling sideways. */
.pagehead { margin: .6rem 0 .4rem; font-size: .95rem; }
.pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.pagegrid .pagebtn { text-align: left; padding: .7rem .9rem; min-height: 2.8rem; }
/* Toms, 2026-10-29: on a computer the tab bar wraps onto a second line instead of hiding tabs off the right edge.
   On a phone it still scrolls sideways; All pages shows every page there at once. */
@media (min-width: 641px) { nav.tabs { flex-wrap: wrap; overflow-x: visible; } }