/* The Coach's Office shell (plan 4, task 5): the heading bar, the live
   badge, the paused and error lines, the area tabs, and what every area
   shares (.o-table, .o-card, .o-soon). Each area's own rules live in
   screens/office/<area>.css. No inline styles anywhere: the page's policy
   is style-src 'self'. */

/* The office gets more room than home's narrow column on a wide screen. */
main:has(> .office) { max-width: 72rem; }
.office { padding: 20px; min-width: 0; }
.office h1 { margin-bottom: .75rem; }
.office h2 { margin-top: .5rem; }

/* One line at every width: the name (or the profile picker) takes what is
   left and shrinks, the live badge and Close never move under it. */
.o-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: .6rem 1rem; margin-bottom: .75rem; }
.o-who { flex: 1 1 auto; min-width: 0; font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  overflow-wrap: anywhere; }
.o-live, .o-close { flex: none; }
.o-who label { font-weight: 400; }
.o-who select {
  font: inherit; min-height: 44px; padding: .4rem .6rem; border-radius: 8px;
  border: 1px solid #555; background: #1b1e19; color: var(--chalk); max-width: 100%;
}
.o-live {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--muted);
}
.o-live::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 999px; background: var(--muted);
}
.o-live[data-state="live"] { color: var(--chalk); }
.o-live[data-state="live"]::before { background: #5BBF6A; }
.o-live[data-state="paused"]::before { background: var(--warn); }
.o-close { min-height: 44px; background: #1b1e19; color: var(--chalk); border: 2px solid var(--line); }

.o-paused, .o-banner {
  margin: 0 0 .75rem; padding: .6rem .8rem; border-radius: 8px; background: #1b1e19;
  border: 2px solid var(--warn); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
}
.o-paused button, .o-error button { min-height: 44px; padding: .5rem .9rem; }
.o-error { color: var(--warn); }
.o-area > .o-error, .o-area-host > .o-error { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.o-loading, .o-soon, .o-empty { color: var(--muted); }

/* The tabs: one strip at every width. It fits on a wide screen; on a
   tablet or a phone the strip scrolls sideways inside itself (the cut-off
   last tab says there is more), the page never does, and the shell keeps
   the chosen tab in view. Nine tabs never wrap into a ragged second row. */
.o-tabs {
  display: flex; flex-wrap: nowrap; gap: .2rem; margin: 0 0 1rem;
  border-bottom: 2px solid var(--line); padding-bottom: .5rem;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.o-tab {
  flex: none; min-height: 44px; padding: .5rem .7rem; background: transparent; color: var(--muted);
  border: 2px solid transparent; border-radius: 8px; font-weight: 600; white-space: nowrap;
}
.o-tab:hover { color: var(--chalk); }
.o-tab[aria-selected="true"] { color: #1b1e19; background: var(--gold); }
.o-area { min-width: 0; }

@media (max-width: 639px) {
  .office { padding: 16px 12px; }
  .o-bar { gap: .5rem; }
}

/* Shared by every area. */
.o-card { background: #1b1e19; border-radius: 10px; padding: 14px 16px; margin: 0 0 .75rem; }

/* A table that stacks each row as a card below 640px. Each cell carries
   its column's name in data-label, shown only when stacked. */
.o-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.o-table th, .o-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.o-table th { color: var(--muted); font-weight: 600; font-size: .9rem; }
@media (max-width: 639px) {
  .o-table, .o-table tbody, .o-table tr, .o-table td { display: block; width: 100%; }
  .o-table thead { display: none; }
  .o-table tr { background: #1b1e19; border-radius: 10px; padding: .4rem .2rem; margin: 0 0 .6rem; }
  .o-table td { border: 0; padding: .25rem .6rem; }
  .o-table td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: .85rem; }
}