/* The session WORKSPACE at /editor/session/:id - EditorSessionWorkspace.vue and
 * the chrome of its Content tab (EditorContentTab.vue).
 *
 * THE CONTENT TAB'S OWN SHEET IS public/css/admin-editor-plan.css - this file
 * holds only the workspace chrome around it (the tab strip, the header band).
 * That sheet was renamed from admin-session-management.css when the screen
 * moved out of /admin (run 1, track 4a); its selectors still carry the `csm-`
 * prefix, which is why a grep for `csm-` lands there and not here.
 *
 * Read public/css/admin-editor.css first - it declares the `--edt-*` tokens
 * this file uses, establishes the LTR island and owns the scroll container
 * (`.edt-body`).
 *
 * The `admin-editor` filename prefix is load-bearing: scripts/bundle-css.mjs
 * partitions the public and admin CSS bundles on `/css/admin` and nothing else,
 * so any other name ships this file to every marketing visitor.
 */

/* THIS is the workspace's real cap, and always was: it wraps the Content, Deck
   and Documents tabs alike, so `.edtd-tab`'s own 1800px in admin-editor-deck.css
   sat behind it as dead code and the deck could never use a pixel past 1400
   however wide the screen was.

   2200px, centred. On a 27" (2506px of content box inside `.edt-body`'s
   padding) the page holds 2200 with 153px of gutter each side; on a MacBook Pro
   16" (1674px) the cap never binds and `margin-inline` is inert. */
.edt-workspace {
  max-width: 2200px;
  margin-inline: auto;
}

/* The workspace's own tab bar: Content | Deck | Materials. */
.edt-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--edt-line);
}

.edt-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--edt-ink-2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.edt-tab:hover {
  color: var(--edt-ink);
}

.edt-tab.is-active {
  color: var(--edt-accent-ink);
  border-bottom-color: var(--edt-accent);
}