/* onboarding.css — hi-fi onboarding chrome on top of tokens.css
 * Reads var(--bg-page), --bg-card, --accent-*, etc. directly.
 * Scope: anything inside .ob-shell.
 */

.ob-shell {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  overflow: hidden;
}

/* ---------- Browser chrome (window frame) ---------- */
.ob-browser {
  width: 100%; height: 100%;
  border-radius: 12px; overflow: hidden;
  background: var(--bg-page);
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.08);
  border: 1px solid var(--border-1);
}
.ob-browser .chrome {
  height: 38px; flex-shrink: 0;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
}
.ob-browser .chrome .dots { display: flex; gap: 6px; }
.ob-browser .chrome .dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-input); }
.ob-browser .chrome .url {
  flex: 1; max-width: 360px; height: 22px; margin-left: 12px;
  background: var(--bg-input); border: 1px solid var(--border-1);
  border-radius: 4px; padding: 0 10px;
  font: 500 11px/22px var(--font-mono); color: var(--fg-3);
  display: flex; align-items: center; gap: 6px;
}
.ob-browser .chrome .url .lock { color: var(--accent-400); font-size: 10px; }

/* ---------- Top header (logo, stepper, persona) ---------- */
.ob-header {
  height: 64px; flex-shrink: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 24px;
  background: var(--bg-card);
}
.ob-header .brand { display: flex; align-items: center; gap: 10px; }
.ob-header .brand .word { font: 800 17px/1 var(--font-display); letter-spacing: -0.02em; color: var(--fg-1); }
.ob-header .brand .word .b { color: var(--brand); }
.ob-header .stepper-wrap { flex: 1; display: flex; justify-content: center; }
.ob-header .right { display: flex; align-items: center; gap: 10px; }
.ob-header .role-pill {
  font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em;
  padding: 5px 9px; border-radius: var(--r-md);
  background: var(--bg-input); color: var(--fg-3); border: 1px solid var(--border-2);
}
.ob-header .help-btn {
  width: 30px; height: 30px; border-radius: var(--r-md);
  background: var(--bg-input); border: 1px solid var(--border-2);
  color: var(--fg-3); display: grid; place-items: center;
  font: 700 12px/1 var(--font-body); cursor: pointer;
}

/* ---------- Stepper (compact pill row) ---------- */
.ob-stepper { display: inline-flex; align-items: center; gap: 8px; }
.ob-step { display: inline-flex; align-items: center; gap: 8px; }
.ob-step .dot {
  width: 22px; height: 22px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-mono);
  background: var(--bg-input); border: 1px solid var(--border-2); color: var(--fg-4);
  flex-shrink: 0;
}
.ob-step .label { font: 600 11.5px/1 var(--font-display); color: var(--fg-4); white-space: nowrap; }
.ob-step.done .dot { background: var(--bg-card-2); border-color: var(--accent-700); color: var(--accent-300); }
.ob-step.done .label { color: var(--fg-3); }
.ob-step.active .dot { background: var(--accent-500); border-color: var(--accent-500); color: #0f172a; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
.ob-step.active .label { color: var(--fg-1); }
.ob-step-conn { width: 22px; height: 1px; background: var(--border-2); flex-shrink: 0; }
.ob-step.done + .ob-step-conn { background: var(--accent-700); }

/* ---------- Body ---------- */
.ob-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.ob-body.two-pane { display: flex; }
.ob-body .left {
  width: 360px; flex-shrink: 0;
  padding: 36px 36px 24px;
  border-right: 1px solid var(--border-1);
  background: var(--bg-card-2);
  display: flex; flex-direction: column; gap: 14px;
  overflow: auto;
}
.ob-body .right {
  flex: 1; min-width: 0;
  padding: 36px 40px 24px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: auto;
}
.ob-body.hero { padding: 56px 64px; align-items: center; justify-content: center; flex-direction: column; gap: 20px; text-align: center; }

/* ---------- Footer ---------- */
.ob-footer {
  height: 68px; flex-shrink: 0;
  padding: 0 28px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-card);
  display: flex; align-items: center; gap: 12px;
}
.ob-footer .progress {
  font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em;
  color: var(--fg-4); margin-left: auto;
}
.ob-footer .save-note { color: var(--fg-4); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.ob-footer .save-note .pulse { width: 6px; height: 6px; background: var(--signal-active); border-radius: 50%; box-shadow: 0 0 8px var(--signal-active); }

/* ---------- Typography helpers (in onboarding scope) ---------- */
.ob-shell .t-eyebrow { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--accent-300); }
.ob-shell .t-display { font: 700 32px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--fg-1); margin: 0; }
.ob-shell .t-display-lg { font: 800 44px/1.02 var(--font-display); letter-spacing: -0.025em; color: var(--fg-1); margin: 0; }
.ob-shell .t-h2 { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
.ob-shell .t-h3 { font: 600 14px/1.3 var(--font-display); color: var(--fg-1); margin: 0; }
.ob-shell .t-body { font: 400 14px/1.55 var(--font-body); color: var(--fg-2); margin: 0; }
.ob-shell .t-muted { color: var(--fg-3); }
.ob-shell .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ob-shell .t-label { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); }

/* ---------- Form bits ---------- */
.ob-shell .ob-field { display: flex; flex-direction: column; gap: 6px; }
.ob-shell .ob-field .lbl { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); }
.ob-shell .ob-input {
  height: 38px; padding: 0 12px;
  background: var(--bg-input); border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--fg-1); font: 500 13.5px/1 var(--font-body);
  display: flex; align-items: center; gap: 8px;
}
.ob-shell .ob-input.empty { color: var(--fg-4); font-weight: 400; }
.ob-shell .ob-input.focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.ob-shell .ob-input.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; }
.ob-shell .ob-input .caret { color: var(--fg-4); margin-left: auto; font-size: 10px; }

/* Real <input>/<select> styled like the read-only pill. The base
   .ob-input is flex (for read-only div content); these overrides reset
   that for real form elements so cursor/text alignment looks native. */
.ob-shell .ob-input.ob-input-real {
  display: block; width: 100%; outline: none; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.ob-shell input.ob-input.ob-input-real {
  /* Native inputs need explicit text-color inheritance — without this,
     Chrome falls back to its system default and drops legibility on the
     dark theme. */
  color: var(--fg-1);
}
.ob-shell input.ob-input.ob-input-real::placeholder {
  color: var(--fg-4); font-weight: 400;
}
.ob-shell input.ob-input.ob-input-real:focus,
.ob-shell select.ob-input.ob-input-real:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.ob-shell select.ob-input.ob-input-real {
  /* Caret on the right — matches the read-only field's ▾ indicator. */
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
                    linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

/* ---------- Buttons (built on top of tokens .btn) ---------- */
.ob-shell .ob-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--font-body);
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.ob-shell .ob-btn.primary { background: var(--accent-500); color: #0f172a; }
.ob-shell .ob-btn.primary:hover { background: var(--accent-400); }
.ob-shell .ob-btn.secondary { background: var(--bg-input); color: var(--fg-2); border-color: var(--border-2); }
.ob-shell .ob-btn.ghost { background: transparent; color: var(--fg-3); }
.ob-shell .ob-btn.ghost:hover { color: var(--fg-1); }
.ob-shell .ob-btn.lg { padding: 12px 20px; font-size: 14px; }

/* ---------- Pickable cards (categories, role choices, view choices) ---------- */
.ob-pick {
  background: var(--bg-card); border: 1.5px solid var(--border-1);
  border-radius: var(--r-lg); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: border-color 120ms ease, background 120ms ease;
}
.ob-pick:hover { border-color: var(--border-3); }
.ob-pick.selected {
  border-color: var(--accent-500);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
  box-shadow: var(--shadow-glow-amber);
}
.ob-pick .head { display: flex; align-items: center; gap: 10px; }
.ob-pick .head .icon {
  width: 28px; height: 28px; border-radius: var(--r-md);
  background: var(--bg-input); border: 1px solid var(--border-2);
  color: var(--fg-3); display: grid; place-items: center;
  font: 700 12px/1 var(--font-mono);
}
.ob-pick.selected .head .icon { background: var(--accent-500); border-color: var(--accent-500); color: #0f172a; }
.ob-pick .head .check { margin-left: auto; color: var(--accent-400); font-size: 14px; }
.ob-pick .head .title { font: 600 14px/1.2 var(--font-display); color: var(--fg-1); }
.ob-pick .desc { font: 400 12.5px/1.4 var(--font-body); color: var(--fg-3); }
.ob-pick .hint { margin-top: auto; font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-4); }
.ob-pick.selected .hint { color: var(--accent-300); }

/* radio dot inside pickable card head */
.ob-radio { width: 14px; height: 14px; border: 1.5px solid var(--border-3); border-radius: 50%; flex-shrink: 0; }
.ob-radio.on { border-color: var(--accent-500); box-shadow: inset 0 0 0 3px var(--accent-500), inset 0 0 0 5px var(--bg-card); }

.ob-check { width: 14px; height: 14px; border: 1.5px solid var(--border-3); border-radius: 3px; flex-shrink: 0; }
.ob-check.on { background: var(--accent-500); border-color: var(--accent-500); }

/* ---------- Map placeholder (matches Customer Detail tile feel) ---------- */
.ob-map {
  position: relative; width: 100%;
  border-radius: var(--r-lg);
  background:
    radial-gradient(at 30% 20%, rgba(251,191,36,0.06), transparent 50%),
    repeating-linear-gradient(0deg, var(--border-1) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, var(--border-1) 0 1px, transparent 1px 100px),
    var(--bg-card-2);
  border: 1px solid var(--border-1);
  overflow: hidden;
}
[data-theme="light"] .ob-map { background:
    radial-gradient(at 30% 20%, rgba(251,191,36,0.10), transparent 50%),
    repeating-linear-gradient(0deg, #e7e2d6 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, #e7e2d6 0 1px, transparent 1px 100px),
    #f4efe1;
}
.ob-map .pin {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.ob-map .pin .head {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-500); border: 2px solid var(--bg-card);
  box-shadow: var(--shadow-pin); display: grid; place-items: center;
  color: #0f172a; font: 700 10px/1 var(--font-mono);
}
.ob-map .pin .stem { width: 2px; height: 6px; background: var(--accent-500); }
.ob-map .pin.customer .head { background: var(--pin-customer); border-color: var(--pin-customer-bd); color: #fff; }
.ob-map .pin.customer .stem { background: var(--pin-customer); }

/* ---------- Misc ---------- */
.ob-divider { display: flex; align-items: center; gap: 12px; color: var(--fg-4); margin: 4px 0; }
.ob-divider::before, .ob-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-1); }
.ob-divider .lbl { font: 600 9.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .14em; }

.ob-card-flat { background: var(--bg-card); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: 14px 16px; }
.ob-card-amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.02));
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: var(--r-lg); padding: 14px 16px;
}

.ob-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ob-table thead th {
  text-align: left; padding: 10px 14px;
  background: var(--bg-card-2); color: var(--fg-3);
  font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid var(--border-1);
}
.ob-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-2);
}
.ob-table tbody tr:last-child td { border-bottom: none; }
.ob-table .num { font-family: var(--font-mono); }

/* ---------- Tablet device frame (driver) ---------- */
.ob-tablet {
  width: 1024px; height: 768px;
  background: #0a0e16; border-radius: 22px;
  padding: 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.1);
}
.ob-tablet .screen {
  flex: 1; background: var(--bg-page); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-1);
}
.ob-tablet .driver-bar {
  height: 44px; background: var(--bg-card);
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; padding: 0 18px; gap: 12px; flex-shrink: 0;
}
.ob-tablet .driver-bar .truck {
  font: 700 12px/1 var(--font-mono); color: var(--accent-300);
  padding: 4px 8px; border-radius: var(--r-sm);
  background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.30);
}

/* ---------- Phone overrides (Phase 31) ----------------------------
 * The driver onboarding shipped at fixed 1024×768 — pixel-perfect on a
 * tablet and on desktop, but invisible on a phone. These rules drop
 * the bezel + fixed dimensions on narrow viewports and let the
 * content reflow. The OUTER `.ob-shell` wrapper also flips its
 * align/justify so the phone scrolls top-to-bottom rather than
 * trying to center a 1024px-wide tablet.
 */
@media (max-width: 900px) {
  /* Outer page wrap — drop the centered-on-screen layout that paints
     the tablet huge in the middle. Stack normally instead. */
  .ob-shell {
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* Tablet bezel collapses to a full-bleed surface — no fixed size,
     no rounded corners, no padding. The screen INSIDE keeps its
     content layout; only the wrapper changes. */
  .ob-tablet {
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 0;
    border-radius: 0;
    background: var(--bg-page);
    box-shadow: none;
  }
  .ob-tablet .screen {
    border-radius: 0;
    border: 0;
    min-height: 100vh;
  }

  /* Driver-bar — keep visible but allow the truck pill / GPS chip to
     wrap if the line is too tight. */
  .ob-tablet .driver-bar {
    flex-wrap: wrap;
    height: auto;
    min-height: 44px;
    padding: 8px 14px;
    gap: 8px;
  }
  .ob-tablet .driver-bar .truck {
    font-size: 10.5px;
    padding: 3px 6px;
  }

  /* Hide the GPS chip text suffix on truly narrow viewports — keep
     the dot + "GPS" so the driver still knows it's tracked. */
  .ob-tablet .driver-bar > span:last-child {
    font-size: 10.5px !important;
  }

  /* Driver page bodies use rich grid / two-column layouts that need
     to stack on narrow viewports. The grid templates and absolute
     positioning live as inline `style={...}` props in the page
     functions, so we can't restyle them via class names alone. The
     individual page-level overrides live further down in this block.
   */

  /* PIN-screen split (left identity rail / right keypad) → stack */
  .ob-tablet .screen > div[style*="display: flex"]
    > div[style*="width: 420px"] {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-1) !important;
    padding: 24px 20px !important;
    gap: 14px !important;
  }
  .ob-tablet .screen > div[style*="display: flex"][style*="flex: 1"] {
    flex-direction: column !important;
  }

  /* Big touch keys are 110px each — too big for narrow phones. Squish
     the grid + cells. */
  .ob-tablet .screen div[style*="grid-template-columns: repeat(3, 110px)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100%;
    max-width: 360px;
    gap: 10px !important;
  }
  .ob-tablet .screen div[style*="grid-template-columns: repeat(3, 110px)"]
    > div[style*="width: 110px"] {
    width: 100% !important;
    height: 70px !important;
    font-size: 22px !important;
  }

  /* Shift-screen pre-flight + manifest grid (1.4fr 1fr) → stack */
  .ob-tablet
    .screen
    div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stop-screen mock-card (absolute right: 350px) + callouts → stack
     the callouts after the card; let the card take full width. */
  .ob-tablet .screen div[style*="right: 350px"] {
    position: relative !important;
    right: auto !important;
    width: 100% !important;
    inset: auto !important;
  }
  /* Hide the right-rail callouts on narrow viewports — they reference
     parts of the mock-card by position, which doesn't track when the
     card stacks differently. The driver still sees the card itself. */
  .ob-tablet .screen div[style*="right: 20px"][style*="width: 310px"] {
    display: none !important;
  }
  .ob-tablet .screen div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  .ob-tablet .screen div[style*="display: flex"][style*="gap: 18px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Roll-screen practice/real (1fr 1fr) → stack */
  .ob-tablet .screen div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tighten section padding everywhere inside the tablet on phone */
  .ob-tablet .screen > div[style*="padding: 36px"],
  .ob-tablet .screen > div[style*="padding: 32px 36px"],
  .ob-tablet .screen > div[style*="padding: 24px 28px"],
  .ob-tablet .screen > div[style*="padding: 20px 24px"] {
    padding: 18px 16px !important;
    gap: 14px !important;
  }

  /* Inline driver stepper — wrap on narrow viewports so the Roll step
     doesn't fall off the right edge. */
  .ob-tablet .screen div[style*="display: inline-flex"][style*="gap: 10px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Big display headlines (h1.t-display-lg fontSize: 38) — drop to a
     phone-friendly size. */
  .ob-tablet .screen h1[style*="fontSize: 38px"] {
    font-size: 26px !important;
  }
  .ob-tablet .screen h1[style*="fontSize: 32px"] {
    font-size: 22px !important;
  }

  /* ----- Browser-shell pages (Owner / Dispatch / Accounting) ------ */

  /* Outer page wrap — collapse the 24px padding so the bezel fills
     the phone viewport edge-to-edge. */
  .ob-shell:has(.ob-browser) {
    padding: 0 !important;
  }
  .ob-browser {
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Faux browser chrome — drop the desktop URL bar, the dots are
     decorative noise on a phone. */
  .ob-browser .chrome { display: none !important; }

  /* Header — keep logo + persona pill + help, drop the stepper
     centerwise (it carries 5-6 step labels which don't fit on a
     phone). The body's progress text already shows step X of Y. */
  .ob-header {
    padding: 0 14px !important;
    gap: 10px !important;
  }
  .ob-header .stepper-wrap { display: none !important; }

  /* Footer — let buttons wrap so the primary CTA is always reachable. */
  .ob-footer {
    height: auto !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .ob-footer .progress {
    margin-left: 0 !important;
    width: 100%;
    order: -1;
  }

  /* Two-pane body — stack the explanatory left rail above the
     interactive right pane. Right pane keeps its rich layout. */
  .ob-body {
    flex-direction: column !important;
    overflow: auto !important;
  }
  .ob-body > div[style*="width: 360px"] {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-1) !important;
    padding: 24px 18px !important;
    gap: 12px !important;
  }
  .ob-body > div[style*="flex: 1"] {
    padding: 24px 18px !important;
    gap: 12px !important;
  }
  .ob-body.hero {
    padding: 32px 18px !important;
  }

  /* Owner Welcome 5-card preview row — stack two-up on phone. */
  .ob-body .ob-card-flat[style*="width: 168px"] {
    width: calc(50% - 6px) !important;
  }
  /* Capability cards on each persona Welcome — stack one-up. */
  .ob-body .ob-card-flat[style*="width: 200px"],
  .ob-body .ob-card-flat[style*="width: 220px"] {
    width: 100% !important;
  }

  /* Two-column form grids (gridTemplateColumns: 1fr 1fr or 1fr 1fr 1fr)
     stack on narrow. Single-tier grids dominated by `repeat(3, 1fr)`
     and `repeat(7, 1fr)` (hours grid) need to keep their columns
     since they're already small cells. We narrow only the 1fr/1fr
     variants here. */
  .ob-body div[style*="grid-template-columns: 1fr 1fr"]:not([style*="repeat"]) {
    grid-template-columns: 1fr !important;
  }
  .ob-body div[style*="grid-template-columns: 180px 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Display headlines on browser-shell pages too. */
  .ob-body h1[style*="fontSize: 38px"],
  .ob-body h1.t-display-lg {
    font-size: 26px !important;
  }
  .ob-body h2.t-display[style*="fontSize: 28px"] {
    font-size: 22px !important;
  }

  /* Tables — make narrow tables scroll horizontally instead of
     squishing into illegibility. */
  .ob-body table.ob-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ---------- Team module (Phase 40b) ---------- */
.tm-pill {
  font: 600 9.5px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
}
.tm-pill-active   { background: rgba(34, 197, 94, 0.15);  color: rgb(74, 222, 128); border: 1px solid rgba(34, 197, 94, 0.30); }
.tm-pill-disabled { background: rgba(148, 163, 184, 0.10); color: var(--fg-4);     border: 1px solid var(--border-2); }
.tm-pill-sent     { background: rgba(245, 158, 11, 0.15); color: rgb(251, 191, 36); border: 1px solid rgba(245, 158, 11, 0.30); }
.tm-pill-draft    { background: rgba(148, 163, 184, 0.10); color: var(--fg-3);     border: 1px solid var(--border-2); }

.tm-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.tm-row td { padding: 14px 16px; vertical-align: middle; }

/* ---------- Permissions matrix cell (Phase 40c) ---------- */
.tm-perm-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font: 600 11px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.tm-perm-cell:hover { background: rgba(255, 255, 255, 0.04); }
.tm-perm-cell .tm-perm-label { font-size: 10.5px; }

.tm-perm-none  { color: var(--fg-4); border-color: var(--border-2); }
.tm-perm-read  { color: rgb(251, 191, 36); border-color: rgba(245, 158, 11, 0.30); background: rgba(245, 158, 11, 0.06); }
.tm-perm-write { color: rgb(251, 191, 36); border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.14); }

.tm-perm-table th { padding: 12px 16px; }
.tm-perm-table td { padding: 12px 16px; vertical-align: middle; }