/* ============================================================
   Maestro Labs — Admin Portal UI
   Component classes extracted from the Admin Portal prototype.
   Design tokens live in colors_and_type.css (--ml-* custom properties).
   Data-driven values (bar widths, donut gradients, avatar colors) stay
   inline in the templates; everything structural lives here.
   ============================================================ */

* { box-sizing: border-box; }
body { margin: 0; }
::placeholder { color: var(--ml-fg-muted); }

/* ---------- App shell ---------- */
.pt-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--ml-font-sans);
  background: #FAFAFA;
  color: var(--ml-fg);
}
.pt-body { display: flex; flex: 1; min-height: 0; }

/* ---------- Top bar ---------- */
.pt-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 32px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--ml-border);
  flex: none;
  position: sticky;
  top: 0;
  z-index: 20;
}
.pt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.pt-brand-lockup { height: 28px; width: auto; display: block; }

.pt-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 4px;
  border: none;
  border-radius: var(--ml-radius-md);
  background: transparent;
  color: var(--ml-fg);
  font-size: 22px;
  cursor: pointer;
}
.pt-hamburger:hover { background: var(--ml-bg-hover); }

.pt-topbar-right { margin-left: auto; position: relative; }
.pt-usermenu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: var(--ml-radius-md);
  background: transparent;
  cursor: pointer;
  font-family: var(--ml-font-sans);
  text-align: left;
}
.pt-usermenu-trigger:hover { background: var(--ml-bg-hover); }
.pt-usermenu-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ml-fg); }
.pt-caret { font-size: 13px; color: var(--ml-fg-secondary); margin-left: 2px; }

.pt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-brand-soft);
  color: var(--ml-purple-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pt-avatar--sm { width: 32px; height: 32px; }
.pt-avatar--xs { width: 28px; height: 28px; font-size: 11px; }

/* ---------- Dropdown menu ---------- */
.pt-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  background: #FFFFFF;
  border-radius: var(--ml-radius-md);
  box-shadow: var(--ml-shadow-lg);
  min-width: 180px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.pt-menu[hidden] { display: none; }
.pt-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--ml-radius-sm);
  background: transparent;
  font-family: var(--ml-font-sans);
  font-size: 14px;
  color: var(--ml-fg);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.pt-menu-item:hover { background: var(--ml-bg-hover); }

/* The signed-in email, above Log out: which account this is. Nothing to read
   past it — greyed and unselectable, because the copy button is how the
   address travels. Padding, gap and type match a menu item, so the two icons
   line up; the row keeps the address on one line, and the menu grows to fit.
   The button is added by JS (see initCopy), so without JS there is still an
   address to read. */
.pt-menu-email {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ml-border);
  font-size: 14px;
  color: var(--ml-fg-muted);
  white-space: nowrap;
  user-select: none;
}
.pt-copy {
  display: inline-flex;
  flex: none;
  border: none;
  background: transparent;
  color: var(--ml-fg-secondary);
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.pt-copy:hover { color: var(--ml-fg); }

/* ---------- Sidebar ---------- */
.pt-sidebar {
  width: 224px;
  flex: none;
  background: #FFFFFF;
  border-right: 1px solid var(--ml-border);
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.pt-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: none;
  border-top: 1px solid var(--ml-border);
  cursor: pointer;
  font-family: var(--ml-font-sans);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  background: transparent;
  color: var(--ml-fg);
}
.pt-nav-item:first-child { border-top: none; }
.pt-nav-item .ph, .pt-nav-item .ph-bold { font-size: 20px; }
.pt-nav-item:hover { background: var(--ml-bg-hover); }
.pt-nav-item--active { background: var(--ml-brand-soft); color: var(--ml-purple-deep); font-weight: 700; }
.pt-nav-item--active:hover { background: var(--ml-brand-soft); }

.pt-nav-group { border-top: 1px solid var(--ml-border); }
.pt-nav-grouphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--ml-font-sans);
  font-size: 13px;
  color: var(--ml-fg-secondary);
  text-align: left;
}
.pt-nav-grouphead:hover { background: var(--ml-bg-hover); }
.pt-nav-grouphead .pt-caret { transition: transform 150ms ease; }
.pt-nav-group[data-collapsed="true"] .pt-nav-grouphead .pt-caret { transform: rotate(-90deg); }
.pt-nav-group[data-collapsed="true"] .pt-nav-sub { display: none; }
.pt-nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px 11px 32px;
  border: none;
  cursor: pointer;
  font-family: var(--ml-font-sans);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  background: transparent;
  color: var(--ml-fg);
}
.pt-nav-subitem .ph { font-size: 17px; }
.pt-nav-subitem:hover { background: var(--ml-bg-hover); }
.pt-nav-subitem--active { background: var(--ml-brand-soft); color: var(--ml-purple-deep); font-weight: 700; }

.pt-nav-support { margin-top: auto; color: var(--ml-fg-secondary); }

.pt-scrim { display: none; }

/* ---------- Main ---------- */
.pt-main { flex: 1; min-width: 0; overflow: auto; padding: 28px 32px 24px; }
/* No width floor: the main column follows the window at every size, and a table
   too wide for it scrolls inside its own card. */
.pt-main-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- Page header (analytics screens) ---------- */
.pt-pagehead { display: flex; align-items: center; gap: 14px; }
.pt-pagehead-icon { width: 34px; height: 34px; border-radius: 8px; display: block; flex: none; }
.pt-pagehead h2 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.3px; }
.pt-pagehead-sub { font-size: 13px; color: var(--ml-fg-secondary); }

/* ---------- Cards ---------- */
.pt-card {
  background: #FFFFFF;
  border-radius: var(--ml-radius-lg);
  box-shadow: var(--ml-shadow-sm);
  display: flex;
  flex-direction: column;
}

/* ---------- Buttons ---------- */
.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  white-space: nowrap;
  border-radius: var(--ml-radius-md);
  border: 1px solid transparent;
  font-family: var(--ml-font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.pt-btn--primary { background: var(--ml-brand); color: var(--ml-fg-on-brand); }
.pt-btn--primary:hover { background: var(--ml-brand-hover); }
.pt-btn--outline { background: #FFFFFF; border-color: var(--ml-border-strong); color: var(--ml-fg); }
.pt-btn--outline:hover { background: var(--ml-bg-hover); }
/* White with a black border that fills purple on hover. Unlike --outline it is
   meant to sit beside a --primary button and read as the quieter of the two. */
.pt-btn--secondary { background: #FFFFFF; border-color: var(--ml-fg); color: var(--ml-fg); }
.pt-btn--secondary:hover { background: var(--ml-brand); border-color: var(--ml-brand); color: var(--ml-fg-on-brand); }
.pt-btn--danger { background: var(--ml-danger); color: #FFFFFF; }
.pt-btn--danger:hover { opacity: 0.9; }
.pt-btn--deep { background: var(--ml-purple-deep); color: #FFFFFF; }
.pt-btn--deep:hover { background: var(--ml-brand); }
.pt-btn--ghost { background: transparent; color: var(--ml-purple-deep); }
.pt-btn--ghost:hover { background: var(--ml-brand-soft); }
.pt-btn--sm { padding: 8px 14px; font-size: 13px; }
.pt-btn:disabled, .pt-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

.pt-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--ml-radius-sm);
  background: transparent;
  color: var(--ml-fg-secondary);
  cursor: pointer;
}
.pt-iconbtn:hover { background: var(--ml-bg-hover); color: var(--ml-fg); }
.pt-iconbtn--danger:hover { background: var(--ml-danger-soft); color: var(--ml-danger); }

/* ---------- Plan banner ---------- */
.pt-plan {
  background: #FFFFFF;
  border-radius: var(--ml-radius-lg);
  box-shadow: var(--ml-shadow-sm);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* min-width keeps the id block a fixed width so stacked plan banners align
   the divider + seat meter, despite names differing in length. */
.pt-plan-id { display: flex; align-items: center; gap: 10px; flex: none; min-width: 190px; }
.pt-plan-logo { width: 30px; height: 30px; border-radius: 8px; display: block; }
.pt-plan-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--ml-brand-soft); color: var(--ml-brand); }
.pt-plan-badge .ph-bold { font-size: 16px; }
.pt-plan-includes { font-size: 12px; color: var(--ml-fg-muted); margin-right: 6px; }
.pt-manage-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--ml-brand-soft); color: var(--ml-brand); }
.pt-manage-badge .ph-bold { font-size: 12px; }
.pt-plan-name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.pt-plan-name .pt-brand-a { color: var(--ml-brand); }
.pt-divider-v { width: 1px; height: 24px; background: var(--ml-border); flex: none; }
.pt-plan-seats { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.pt-plan-seats-label { font-size: 13px; color: var(--ml-fg-secondary); white-space: nowrap; }
.pt-plan-seats-label strong { color: var(--ml-fg); }
.pt-plan-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.pt-plan-warn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}

/* A cancellation the customer scheduled: the plan is paid for and working
   until the date, so the card warns rather than takes anything away. */
.pt-plan-cancelling {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--ml-radius-pill);
  background: var(--ml-warning-soft); color: #8A5B00;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pt-plan-cancelling .ph-bold { font-size: 14px; }
/* A subscription that has stopped, in place of the seat meter. */
.pt-plan-ended {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--ml-radius-pill);
  background: var(--ml-danger-soft); color: var(--ml-danger);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pt-plan-ended .ph-bold { font-size: 14px; }

.pt-badge-bundle {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--ml-radius-pill); background: var(--ml-purple-deep);
  color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
}

/* ---------- Meter (progress bar) ---------- */
.pt-meter { width: 140px; flex: none; height: 6px; border-radius: var(--ml-radius-pill); background: var(--ml-goku); overflow: hidden; }
.pt-meter-fill { height: 100%; border-radius: var(--ml-radius-pill); background: var(--ml-brand); transition: width 200ms ease-out; }
.pt-meter--wide { width: 100%; height: 8px; }
.pt-meter--tiny { width: 56px; height: 5px; }
.pt-meter--thin { height: 4px; }

/* ---------- Panel (Users) ---------- */
.pt-panel { overflow: visible; }
.pt-panel-head { padding: 14px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pt-panel-head h3 { font-size: 20px; font-weight: 700; margin: 0 6px 0 0; flex: none; }

.pt-search {
  display: flex; align-items: center; gap: 10px; width: 240px; flex: none;
  padding: 8px 14px; border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-pill); background: #FFFFFF;
}
.pt-search .ph { font-size: 16px; color: var(--ml-fg-secondary); }
.pt-search input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--ml-font-sans); font-size: 14px; color: var(--ml-fg); background: transparent; }
.pt-search-clear { border: none; background: transparent; font-family: var(--ml-font-sans); font-size: 13px; color: var(--ml-fg-secondary); cursor: pointer; padding: 0; }

/* ---------- Segmented chips ---------- */
.pt-chips { display: flex; gap: 2px; padding: 3px; background: var(--ml-bg-subtle); border-radius: var(--ml-radius-pill); }
.pt-chips--push { margin-left: auto; }
.pt-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: var(--ml-radius-pill); border: none; background: transparent;
  color: var(--ml-fg-secondary); font-family: var(--ml-font-sans); font-size: 13px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.pt-chip-count { font-size: 12px; opacity: 0.55; }
.pt-chip--active { background: #FFFFFF; color: var(--ml-fg); font-weight: 700; box-shadow: var(--ml-shadow-sm); }

/* ---------- Tables ---------- */
.pt-table { overflow-x: auto; }

/* Members table column template (overridden narrower on phones). */
[data-pt-users] { --pt-cols: minmax(260px, 1.4fr) 150px 160px 96px; }
/* Feature-adoption matrix column template (overridden on phones). */
[data-pt-matrix] { --pt-cols: minmax(150px, 1.3fr) repeat(6, 1fr) 0.8fr; }

/* Wide scroll containers: visible, grabbable scrollbar + drag-to-scroll cursor. */
.pt-table, .pt-matrix-scroll { scrollbar-width: thin; scrollbar-color: var(--ml-picolo) transparent; }
.pt-table::-webkit-scrollbar, .pt-matrix-scroll::-webkit-scrollbar { height: 10px; }
.pt-table::-webkit-scrollbar-thumb, .pt-matrix-scroll::-webkit-scrollbar-thumb {
  background: var(--ml-picolo); border-radius: var(--ml-radius-pill);
  border: 2px solid #FFFFFF; background-clip: padding-box;
}
.pt-table::-webkit-scrollbar-track, .pt-matrix-scroll::-webkit-scrollbar-track { background: transparent; }
.pt-dragging { cursor: grabbing; user-select: none; }
.pt-dragging * { pointer-events: none; }
.pt-thead, .pt-trow {
  display: grid;
  align-items: center;
  grid-template-columns: var(--pt-cols);
}
.pt-thead {
  height: 36px;
  border-top: 1px solid var(--ml-border);
  border-bottom: 1px solid var(--ml-border);
}
.pt-th {
  padding: 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.6px;
  color: var(--ml-fg-muted); text-transform: uppercase;
}
.pt-th--lead { padding-left: 24px; }
.pt-th--num { text-align: right; }
.pt-th--center { text-align: center; }
.pt-cell--center { justify-content: center; text-align: center; }
.pt-trow { height: 56px; border-bottom: 1px solid var(--ml-border); position: relative; }
.pt-trow:hover { background: var(--ml-bg-hover); }
.pt-trow[hidden] { display: none; }

.pt-usercell { display: flex; align-items: center; gap: 12px; padding: 0 24px; min-width: 0; }
.pt-usercell-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-usercell-nameline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pt-name { font-size: 14px; font-weight: 600; color: var(--ml-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-email { font-size: 12px; color: var(--ml-fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pt-badge {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: var(--ml-radius-pill); background: var(--ml-brand-soft);
  color: var(--ml-purple-deep); font-size: 11px; font-weight: 600; flex: none;
}
.pt-prodbadge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: var(--ml-radius-pill); background: var(--ml-bg-subtle);
  color: var(--ml-fg-secondary); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pt-prodbadge img { width: 14px; height: 14px; border-radius: 3px; display: block; }

.pt-cell { padding: 0 12px; font-size: 13px; color: var(--ml-fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-cell--num { text-align: right; }

.pt-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  border-radius: var(--ml-radius-pill); font-size: 13px; font-weight: 500;
}
.pt-status--active { background: var(--ml-success-soft); color: var(--ml-success); }
.pt-status--accepted { background: var(--ml-info-soft); color: var(--ml-info); }
.pt-status--pending { background: var(--ml-warning-soft); color: #8A5B00; }
.pt-dot { width: 6px; height: 6px; border-radius: 50%; }
.pt-status--active .pt-dot { background: var(--ml-success); }
.pt-status--accepted .pt-dot { background: var(--ml-info); }
.pt-status--pending .pt-dot { background: var(--ml-warning); }

.pt-rowactions { display: flex; justify-content: flex-end; gap: 4px; padding: 0 16px; }

.pt-empty { padding: 48px 24px; text-align: center; color: var(--ml-fg-secondary); font-size: 14px; }

/* ---------- Panel footer / pagination ---------- */
.pt-panel-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; border-top: 1px solid var(--ml-border); }
.pt-pager { display: flex; align-items: center; gap: 4px; }
.pt-page {
  min-width: 28px; height: 28px; border-radius: var(--ml-radius-sm); border: none;
  background: transparent; color: var(--ml-fg-secondary); font-family: var(--ml-font-sans);
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pt-page:hover { background: var(--ml-bg-hover); color: var(--ml-fg); }
.pt-page--active { background: var(--ml-brand-soft); color: var(--ml-purple-deep); font-weight: 700; }
.pt-page:disabled { opacity: 0.4; cursor: default; }
.pt-page:disabled:hover { background: transparent; }

/* ---------- KPI cards ---------- */
.pt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pt-kpi { background: #FFFFFF; border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.pt-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.pt-kpi-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  flex: none; border-radius: var(--ml-radius-md); background: var(--ml-brand-soft); color: var(--ml-purple-deep);
}
.pt-kpi-icon .ph, .pt-kpi-icon .ph-fill { font-size: 18px; }
.pt-kpi-value { font-family: var(--ml-font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; color: var(--ml-fg); }
.pt-kpi-label { font-size: 13px; color: var(--ml-fg-secondary); }
.pt-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.pt-trend-up { color: var(--ml-success); }
.pt-trend-down { color: var(--ml-danger); }

.pt-kpi--hero {
  position: relative; overflow: hidden; color: #FFFFFF;
  background: linear-gradient(135deg, #5B51C9 0%, #4E46B4 52%, #3D3796 100%);
  box-shadow: 0 8px 24px -8px rgba(78,70,180,0.55);
}
.pt-kpi--hero .pt-kpi-value { color: #FFFFFF; }
.pt-kpi--hero .pt-kpi-label { color: rgba(255,255,255,0.85); }
.pt-kpi-hero-unit { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); }
.pt-kpi-hero-icon { background: rgba(255,255,255,0.18); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.pt-kpi-hero-trend { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: var(--ml-radius-pill); background: rgba(255,255,255,0.2); font-size: 12px; font-weight: 700; color: #FFFFFF; }
.pt-kpi-hero-orb { position: absolute; right: -28px; top: -28px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%); pointer-events: none; }
.pt-kpi-hero-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: flex-end; gap: 4px; padding: 0 14px; opacity: 0.45; pointer-events: none; }
.pt-kpi-hero-bars span { flex: 1; border-radius: 3px 3px 0 0; background: rgba(255,255,255,0.55); }
.pt-kpi-rel { position: relative; }

/* ---------- Section card (activity, leaderboards, matrix) ---------- */
.pt-section { background: #FFFFFF; border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-sm); display: flex; flex-direction: column; overflow: hidden; }
.pt-section-head { padding: 18px 24px 14px; }
/* The icon runs in the heading's own text, so a title long enough to wrap keeps
   it beside the first line instead of centred against all of them. */
.pt-section-title .ph { display: inline-block; margin-right: 8px; vertical-align: -1px; font-size: 17px; color: var(--ml-purple-deep); }
.pt-section-title h3 { display: inline; font-size: 16px; font-weight: 700; margin: 0; }
.pt-section-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--ml-fg-secondary); }
.pt-section-body { padding: 0 24px 20px; }
.pt-scroll { max-height: 392px; overflow: auto; }

.pt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
/* One card per question, side by side, wrapping on their own. The min() keeps
   a card from outgrowing a phone narrower than the 320px it asks for, and
   min-width lets one hold text longer than its column (a long email domain)
   instead of widening every column to fit it. */
.pt-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.pt-grid-cards > * { min-width: 0; }
.pt-form-actions { display: flex; gap: 12px; margin-top: 20px; }

/* ---------- Integrations: stacked cards, switch, notice, upsell ---------- */
/* Full-width cards one under another, unlike the settings screen's columns:
   each row here is a sentence and a control, not a list of choices. */
.pt-stack-cards { display: flex; flex-direction: column; gap: 20px; }

.pt-switch-row { display: flex; align-items: flex-start; gap: 20px; padding: 16px 24px 18px; border-top: 1px solid var(--ml-border); }
.pt-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pt-switch-label { font-size: 15px; font-weight: 600; }
.pt-switch-sub { font-size: 13px; color: var(--ml-fg-secondary); max-width: 620px; text-wrap: pretty; }
.pt-switch-form { display: flex; align-items: center; gap: 12px; flex: none; padding-top: 2px; }
.pt-switch-state { font-size: 13px; font-weight: 600; color: var(--ml-brand); }
.pt-switch-state--off { color: var(--ml-fg-secondary); }
/* The whole switch is the submit button, so a click is the save. */
.pt-switch { position: relative; width: 46px; height: 26px; flex: none; padding: 0; border: none; border-radius: var(--ml-radius-pill); background: var(--ml-border); cursor: pointer; transition: background 160ms ease; }
.pt-switch--on { background: var(--ml-brand); }
.pt-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); transition: left 160ms ease; }
.pt-switch--on .pt-switch-knob { left: 23px; }

.pt-notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--ml-border); }
.pt-notice--warning { background: var(--ml-warning-soft); color: #8A5B00; }
.pt-notice .ph-bold { font-size: 17px; margin-top: 1px; }
.pt-notice-title { display: block; font-size: 13px; font-weight: 700; }
.pt-notice-body { display: block; margin-top: 4px; font-size: 13px; }

.pt-upsell { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border: 1px dashed var(--ml-purple-transparent-strong); border-radius: var(--ml-radius-lg); background: var(--ml-brand-soft); }
.pt-upsell-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: var(--ml-radius-md); background: #FFFFFF; color: var(--ml-purple-deep); font-size: 20px; }
.pt-upsell-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-upsell-title { font-size: 15px; font-weight: 700; }
.pt-upsell-sub { font-size: 13px; color: var(--ml-fg-secondary); text-wrap: pretty; }

/* ---------- Leaderboard ---------- */
.pt-leader-body { display: flex; flex-direction: column; gap: 16px; max-height: 300px; overflow: auto; padding-right: 4px; }
.pt-leader-row { display: flex; align-items: center; gap: 12px; }
.pt-leader-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pt-leader-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pt-leader-val { font-size: 13px; font-weight: 700; color: var(--ml-fg); }
.pt-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; }

/* ---------- Feature cards ---------- */
.pt-features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pt-feature { background: #FFFFFF; border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pt-feature-top { display: flex; align-items: center; gap: 8px; }
.pt-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: var(--ml-radius-sm); background: var(--ml-brand-soft); color: var(--ml-purple-deep); }
.pt-feature-icon .ph { font-size: 15px; }
.pt-feature-pct { font-family: var(--ml-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.pt-feature-bar { display: flex; align-items: center; gap: 7px; }
/* The meter takes what the card has left rather than the 140px a meter is
   wide elsewhere. A fixed width there is a floor under the whole card, and
   six of those floors held the row wider than the window. */
.pt-feature-bar .pt-meter { flex: 1; width: auto; min-width: 0; }
.pt-feature-count { font-size: 11px; font-weight: 600; color: var(--ml-fg-muted); white-space: nowrap; }
.pt-feature-label { font-size: 12px; color: var(--ml-fg-secondary); line-height: 1.25; min-height: 30px; }

/* ---------- Feature matrix ---------- */
.pt-matrix-head { padding: 18px 24px 14px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pt-matrix-headmain { flex: 1; min-width: 0; }
.pt-matrix-scroll { overflow: auto; }
.pt-matrix-cols { display: grid; align-items: stretch; height: 52px; border-top: 1px solid var(--ml-border); border-bottom: 1px solid var(--ml-border); grid-template-columns: var(--pt-cols); position: sticky; top: 0; z-index: 2; background: #FFFFFF; }
.pt-matrix-colhead { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; background: transparent; cursor: pointer; font-family: var(--ml-font-sans); font-size: 11px; font-weight: 600; color: var(--ml-fg-muted); text-align: center; line-height: 1.05; padding: 0 3px; }
.pt-matrix-colhead:hover { background: var(--ml-bg-hover); }
.pt-matrix-colhead .ph { font-size: 15px; color: var(--ml-purple-deep); }
.pt-matrix-userhead { display: flex; align-items: center; padding: 0 24px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: var(--ml-fg-muted); text-transform: uppercase; }
.pt-matrix-row { display: grid; align-items: center; height: 52px; border-bottom: 1px solid var(--ml-border); grid-template-columns: var(--pt-cols); }
.pt-matrix-row[hidden] { display: none; }
.pt-matrix-row:hover { background: var(--ml-bg-hover); }
.pt-matrix-cell { display: flex; justify-content: center; padding: 0 8px; }
.pt-matrix-chip { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; border-radius: var(--ml-radius-sm); }
.pt-matrix-chip .ph { font-size: 13px; }
.pt-matrix-chip--yes { background: var(--ml-success-soft); color: var(--ml-success); }
.pt-matrix-chip--no { background: var(--ml-bg-subtle); color: var(--ml-fg-muted); }

/* ---------- Per-user activity table ---------- */
.pt-activity-scroll { overflow: auto; }
.pt-activity-head { display: grid; align-items: center; height: 36px; border-top: 1px solid var(--ml-border); border-bottom: 1px solid var(--ml-border); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: var(--ml-fg-muted); text-transform: uppercase; grid-template-columns: var(--pt-cols); position: sticky; top: 0; z-index: 2; background: #FFFFFF; }
.pt-activity-row { display: grid; align-items: center; height: 52px; border-bottom: 1px solid var(--ml-border); grid-template-columns: var(--pt-cols); }
.pt-activity-row[hidden] { display: none; }
.pt-activity-row:hover { background: var(--ml-bg-hover); }

/* ---------- Donut + distribution ---------- */
.pt-donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.pt-donut { position: relative; width: 152px; height: 152px; flex: none; border-radius: 50%; box-shadow: 0 10px 26px -10px rgba(78,70,180,0.45); }
.pt-donut-hole { position: absolute; inset: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pt-donut-total { font-family: var(--ml-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.pt-donut-cap { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ml-fg-muted); }
.pt-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.pt-legend-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--ml-radius-sm); }
.pt-legend-row:hover { background: var(--ml-bg-hover); }
.pt-legend-swatch { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.pt-legend-label { flex: 1; min-width: 0; font-size: 13px; color: var(--ml-fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-legend-pct { font-size: 13px; font-weight: 700; color: var(--ml-fg); flex: none; }
.pt-legend-count { width: 44px; text-align: right; flex: none; font-size: 12px; color: var(--ml-fg-muted); }

.pt-sizes { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-content: center; }
.pt-size { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 16px; border-radius: var(--ml-radius-lg); background: var(--ml-bg-subtle); border: 1px solid var(--ml-border); }
.pt-size-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #FFFFFF; }
.pt-size-icon .ph { font-size: 21px; }
.pt-size-count { font-family: var(--ml-font-display); font-size: 27px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; color: var(--ml-fg); }
.pt-size-pct { font-size: 13px; font-weight: 800; padding: 2px 11px; border-radius: var(--ml-radius-pill); color: #FFFFFF; white-space: nowrap; }
.pt-size-label { font-size: 12px; font-weight: 600; color: var(--ml-fg-secondary); white-space: nowrap; }

/* ---------- Date range dropdown ---------- */
.pt-daterange { margin-left: auto; position: relative; }
.pt-daterange-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: #FFFFFF; border-radius: var(--ml-radius-md); box-shadow: var(--ml-shadow-lg); width: 264px; padding: 6px; display: flex; flex-direction: column; }
.pt-daterange-menu[hidden] { display: none; }
.pt-range-check { margin-left: auto; color: var(--ml-brand); font-size: 14px; }
.pt-range-divider { height: 1px; background: var(--ml-border); margin: 4px 0; }
.pt-range-custom { display: flex; flex-direction: column; gap: 12px; padding: 12px 8px 6px; }
.pt-range-custom[hidden] { display: none; }
.pt-menu-item--sel { background: var(--ml-brand-soft); font-weight: 600; }

/* ---------- Placeholder empty screen ---------- */
.pt-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ml-fg-secondary); text-align: center; padding: 64px 24px; }
.pt-placeholder .ph { font-size: 40px; color: var(--ml-fg-muted); }
.pt-placeholder-title { font-size: 16px; font-weight: 600; color: var(--ml-fg); }

/* ---------- Modals ---------- */
.pt-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.32); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pt-modal-overlay[hidden] { display: none; }
.pt-modal { background: #FFFFFF; border-radius: var(--ml-radius-xl); box-shadow: var(--ml-shadow-xl); width: 500px; max-width: 100%; max-height: 90vh; overflow: auto; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.pt-modal--sm { width: 440px; }
.pt-modal--md { width: 480px; }
.pt-modal-head { display: flex; align-items: center; justify-content: space-between; }
.pt-modal-head h4 { font-size: 20px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.pt-modal-actions { display: flex; justify-content: flex-end; gap: 12px; }

.pt-field { display: flex; flex-direction: column; gap: 8px; }
.pt-label { font-size: 13px; font-weight: 600; color: var(--ml-fg-secondary); }
.pt-hint { font-size: 12px; color: var(--ml-fg-muted); }
.pt-input {
  padding: 9px 12px; border: 1px solid var(--ml-border); border-radius: var(--ml-radius-md);
  font-family: var(--ml-font-sans); font-size: 14px; color: var(--ml-fg); background: #FFFFFF; outline: none;
}
.pt-input:focus { box-shadow: var(--ml-focus-ring); }
/* Input with a leading icon. */
.pt-inputgroup { position: relative; }
.pt-inputgroup .pt-input { width: 100%; padding-left: 38px; }
.pt-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ml-fg-secondary); font-size: 18px; line-height: 1; pointer-events: none; }
/* Password field with the reveal button portal.js puts there. The field keeps
   room for it on the right the way .pt-selectgroup does for its caret. */
.pt-inputgroup--reveal .pt-input { padding-right: 38px; }
.pt-input-reveal {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; padding: 5px; border: 0; border-radius: var(--ml-radius-sm);
  background: none; color: var(--ml-fg-secondary); font-size: 18px; line-height: 1; cursor: pointer;
}
.pt-input-reveal:hover { color: var(--ml-fg); background: var(--ml-bg-hover); }
.pt-input-reveal:focus-visible { outline: none; box-shadow: var(--ml-focus-ring); }
.pt-error { font-size: 12px; color: var(--ml-danger); }

/* Radio list. The control is drawn here, since the browser's own can't take the
   brand colour: a ring when empty, filled with a white centre when picked. */
.pt-radios { display: flex; flex-direction: column; gap: 2px; }
/* anywhere, not break-word: an option naming a domain must be free to break it
   mid-word, or the card can't be narrower than that one word. */
.pt-radio { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: var(--ml-radius-md); font-size: 14px; color: var(--ml-fg); cursor: pointer; overflow-wrap: anywhere; }
.pt-radio:hover { background: var(--ml-bg-hover); }
/* An option reads as a short label with a line of plain English under it. */
.pt-radio-label, .pt-radio-hint { display: block; }
.pt-radio-hint { font-size: 12px; color: var(--ml-fg-secondary); }
.pt-radio input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 1px 0 0;
  width: 18px; height: 18px; box-sizing: border-box;
  border: 1px solid var(--ml-border-strong); border-radius: 50%;
  background: #FFFFFF; cursor: pointer;
}
.pt-radio input:checked { border-color: var(--ml-brand); background: var(--ml-brand); box-shadow: inset 0 0 0 3px #FFFFFF; }
.pt-radio input:focus-visible { outline: none; box-shadow: var(--ml-focus-ring); }
.pt-radio input:checked:focus-visible { box-shadow: inset 0 0 0 3px #FFFFFF, var(--ml-focus-ring); }

/* Select. The browser's own arrow can't be styled, so it's turned off and a
   caret is placed over the field the way .pt-input-icon does. */
.pt-select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 12px; min-height: 46px; box-sizing: border-box;
  border: 1px solid var(--ml-border); border-radius: var(--ml-radius-md);
  font-family: var(--ml-font-sans); font-size: 14px; color: var(--ml-fg); background: #FFFFFF;
  outline: none; cursor: pointer;
}
.pt-select:hover { background: var(--ml-bg-hover); }
.pt-select:focus { box-shadow: var(--ml-focus-ring); }
.pt-selectgroup { position: relative; }
.pt-selectgroup .pt-select { width: 100%; padding-right: 38px; }
.pt-select-caret { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--ml-fg-secondary); font-size: 16px; line-height: 1; pointer-events: none; }

/* Combobox. The select keeps the value and the no-JS behaviour; this is the
   search field JS puts in its place, and the list it filters. */
.pt-combobox-input { cursor: text; }
/* Nothing to type into (data-search="off"): the field only opens the list. */
.pt-combobox-input[readonly] { cursor: pointer; }
.pt-combobox-input::placeholder { color: var(--ml-fg-muted); }
/* Open: the field is the brand's, and the caret has turned over. */
.pt-selectgroup[data-open] .pt-combobox-input { border-color: var(--ml-brand); box-shadow: var(--ml-focus-ring); background: #FFFFFF; }
.pt-selectgroup[data-open] .pt-select-caret { color: var(--ml-brand); transform: translateY(-50%) rotate(180deg); }
.pt-selectgroup .pt-select-caret { transition: transform 0.15s ease, color 0.15s ease; }

/* A layer of its own: fixed, so no scrolling ancestor can clip it — a modal
   keeps its own scroll and a card its rounded corners. portal.js sets where it
   goes, above or below the field, since fixed coordinates are the viewport's. */
.pt-combobox-menu { position: fixed; z-index: 30; max-height: 296px; overflow-y: auto; padding: 6px; background: #FFFFFF; border: 1px solid var(--ml-border); border-radius: var(--ml-radius-md); box-shadow: var(--ml-shadow-lg); }
.pt-combobox-menu[hidden] { display: none; }
/* Section heading, with a rule running out to the edge — what sets the
   organization's own templates apart from the ones the product ships. */
.pt-combobox-group { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ml-fg-muted); }
.pt-combobox-group::after { content: ""; flex: 1; height: 1px; background: var(--ml-border); }
.pt-combobox-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--ml-radius-sm); font-size: 14px; color: var(--ml-fg); cursor: pointer; }
.pt-combobox-icon { flex: none; font-size: 17px; color: var(--ml-fg-secondary); }
.pt-combobox-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-combobox-check { display: none; flex: none; font-size: 14px; color: var(--ml-brand); }
/* Where the keyboard is; the pointer moves it too, so both agree. */
.pt-combobox-option--active { background: var(--ml-bg-hover); }
/* What is in force: brand-marked, so it stays legible under the active row. */
.pt-combobox-option[aria-selected="true"] { color: var(--ml-purple-deep); font-weight: 600; }
.pt-combobox-option[aria-selected="true"] .pt-combobox-icon { color: var(--ml-brand); }
.pt-combobox-option[aria-selected="true"] .pt-combobox-check { display: block; }
.pt-combobox-option[aria-selected="true"].pt-combobox-option--active { background: var(--ml-brand-soft); }
.pt-combobox-empty { padding: 14px 12px; font-size: 14px; color: var(--ml-fg-secondary); text-align: center; }

/* email chips input */
.pt-chipsinput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 10px; min-height: 46px; border: 1px solid var(--ml-border); border-radius: var(--ml-radius-md); cursor: text; }
.pt-chipsinput:focus-within { box-shadow: var(--ml-focus-ring); }
.pt-emailchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px; border-radius: var(--ml-radius-pill); background: var(--ml-brand-soft); color: var(--ml-purple-deep); font-size: 13px; font-weight: 500; max-width: 100%; }
.pt-emailchip--invalid { background: var(--ml-danger-soft); color: var(--ml-danger); }
.pt-emailchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-emailchip button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.pt-emailchip button:hover { background: rgba(0,0,0,0.08); }
.pt-chipsinput input { flex: 1; min-width: 150px; border: none; outline: none; font-family: var(--ml-font-sans); font-size: 14px; color: var(--ml-fg); background: transparent; padding: 4px 2px; }

.pt-license-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ml-border); border-radius: var(--ml-radius-md); background: var(--ml-bg-subtle); }
.pt-license-box img { width: 24px; height: 24px; border-radius: 6px; display: block; }
.pt-license-box-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--ml-brand-soft); color: var(--ml-brand); }
.pt-license-box-badge .ph-bold { font-size: 14px; }
.pt-license-box-name { font-size: 14px; font-weight: 600; }
.pt-license-box-seats { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ml-fg-secondary); white-space: nowrap; }
.pt-license-box-seats--low { color: #8A5B00; font-weight: 600; }

/* License dropdown — a pt-license-box that opens a menu of plans to choose from. */
.pt-license-select { position: relative; }
.pt-license-trigger { width: 100%; cursor: pointer; font-family: var(--ml-font-sans); text-align: left; }
.pt-license-trigger:hover { background: var(--ml-bg-hover); }
.pt-license-body { display: contents; }
.pt-license-menu .pt-menu-item img { width: 24px; height: 24px; border-radius: 6px; display: block; }
.pt-license-menu { left: 0; right: 0; min-width: 0; }
.pt-license-menu .pt-menu-item { padding: 10px 12px; }
.pt-license-check { color: var(--ml-brand); font-size: 14px; }

.pt-modal-foot-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pt-soon-row { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ml-fg-secondary); }
.pt-soon-row .ph { font-size: 15px; }
.pt-soon-pill { padding: 1px 7px; border-radius: var(--ml-radius-pill); background: var(--ml-bg-subtle); color: var(--ml-fg-muted); font-size: 11px; font-weight: 600; }

.pt-notice { display: flex; gap: 8px; padding: 12px 14px; border-radius: var(--ml-radius-md); background: var(--ml-warning-soft); font-size: 13px; color: #8A5B00; line-height: 1.45; }
.pt-notice .ph, .pt-notice .ph-bold { font-size: 16px; flex: none; margin-top: 1px; }

/* stepper (manage seats) */
.pt-stepper { display: flex; align-items: center; gap: 20px; justify-content: center; }
.pt-stepper-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ml-radius-pill); border: 1px solid var(--ml-border); background: #FFFFFF; color: var(--ml-fg); cursor: pointer; }
.pt-stepper-btn:hover { background: var(--ml-bg-hover); }
.pt-stepper-btn--primary { border: none; background: var(--ml-brand); box-shadow: var(--ml-shadow-sm); color: var(--ml-fg-on-brand); }
.pt-stepper-btn--primary:hover { background: var(--ml-brand-hover); }
.pt-stepper-btn .ph-bold { font-size: 18px; }
.pt-stepper-input { width: 124px; text-align: center; font-family: var(--ml-font-display); font-size: 52px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; color: var(--ml-fg); border: none; background: transparent; outline: none; padding: 0; border-radius: var(--ml-radius-md); }
.pt-stepper-input:focus { box-shadow: var(--ml-focus-ring); background: #FFFFFF; }
.pt-stepper-btn--off { color: var(--ml-fg-muted); cursor: not-allowed; }

/* Seat-delta badge in the Manage-licenses modal (colors set by JS per delta). */
.pt-seatbadge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--ml-radius-pill); background: var(--ml-bg-subtle); color: var(--ml-fg-muted); font-size: 12px; font-weight: 700; }

.pt-upgrade-list { background: var(--ml-bg-subtle); border-radius: var(--ml-radius-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pt-upgrade-list-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pt-upgrade-list-item .ph-bold { font-size: 16px; color: var(--ml-success); }

/* ---------- Django messages ---------- */
/* Toasts — one shown at a time from a queue (see initToasts in portal.js).
   The container never blocks the UI; only the toast itself is interactive. */
.pt-toasts { position: fixed; top: 84px; right: 24px; z-index: 60; width: 360px; max-width: calc(100vw - 48px); pointer-events: none; }
.pt-toast {
  /* Same soft-bg + accent-text scheme as the status badges (Active/Pending). */
  --pt-bg: var(--ml-brand-soft);
  --pt-fg: var(--ml-brand);
  --pt-bar: var(--ml-brand);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 52px;
  padding: 12px 14px;
  border-radius: var(--ml-radius-md);
  background: var(--pt-bg); box-shadow: var(--ml-shadow-lg);
  font-size: 14px; font-weight: 500; color: var(--pt-fg);
  pointer-events: auto;
  opacity: 0; transform: translateX(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Queued toasts must stay fully hidden — the display:flex above otherwise
   defeats the [hidden] attribute, letting their timers run invisibly. */
.pt-toast[hidden] { display: none; }
.pt-toast--in { opacity: 1; transform: none; }
.pt-toast--out { opacity: 0; transform: translateX(12px); }
.pt-toast--success { --pt-bg: var(--ml-success-soft); --pt-fg: var(--ml-success); --pt-bar: var(--ml-success); }
.pt-toast--error { --pt-bg: var(--ml-danger-soft); --pt-fg: var(--ml-danger); --pt-bar: var(--ml-danger); }
.pt-toast--warning { --pt-bg: var(--ml-warning-soft); --pt-fg: #8A5B00; --pt-bar: var(--ml-warning); }
.pt-toast-icon { flex: none; font-size: 18px; line-height: 1; }
.pt-toast-body { flex: 1; min-width: 0; line-height: 1.4; }
.pt-toast-close { flex: none; margin: 0 -4px 0 0; padding: 2px; border: none; background: transparent; border-radius: var(--ml-radius-sm); color: currentColor; opacity: 0.6; font-size: 16px; line-height: 1; cursor: pointer; }
.pt-toast-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.pt-toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--pt-bar); transform-origin: left; animation: pt-toast-timer 5s linear forwards; }
.pt-toast:hover .pt-toast-progress { animation-play-state: paused; }
@keyframes pt-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .pt-toast, .pt-toast--out { transform: none; }
}

/* ---------- Tooltips (icon-only buttons) ---------- */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); right: 0;
  white-space: nowrap; background: #26262B; color: #FFFFFF; padding: 5px 10px;
  border-radius: 6px; font-family: var(--ml-font-sans); font-size: 12px; font-weight: 500;
  z-index: 40; pointer-events: none; box-shadow: var(--ml-shadow-md);
}

/* ---------- Sign-in ---------- */
.pt-signin-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #FAFAFA; }
.pt-signin-card { position: relative; width: 400px; max-width: 100%; background: #FFFFFF; border-radius: var(--ml-radius-xl); box-shadow: var(--ml-shadow-lg); padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; }
/* Logo + heading are one identity unit — tighter spacing than the rhythm below. */
.pt-signin-header { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pt-signin-brand { display: flex; align-items: center; justify-content: center; }
.pt-signin-brand .pt-brand-lockup { height: 32px; }
.pt-signin-head { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.pt-signin-oauth { display: flex; flex-direction: column; gap: 10px; }
/* Full-width sign-in buttons (OAuth + submit) share one size. */
.pt-signin-btn { width: 100%; justify-content: center; padding: 11px 18px; gap: 10px; }
.pt-oauth-icon { width: 18px; height: 18px; }
/* A 1px hairline; an optional centered <span> (with the card background) cuts
   an "or" into it. Both variants keep the same 1px box so the card's flex gap
   spaces every row evenly. */
.pt-signin-divider { display: flex; align-items: center; justify-content: center; height: 1px; background: var(--ml-border); }
.pt-signin-divider > span { padding: 0 12px; background: #FFFFFF; color: var(--ml-fg-secondary); font-size: 13px; line-height: 1; }
.pt-signin-head h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.3px; }
.pt-signin-head p { font-size: 14px; color: var(--ml-fg-secondary); margin: 0; }
.pt-signin-form { display: flex; flex-direction: column; gap: 16px; }
.pt-signin-field { display: flex; flex-direction: column; gap: 6px; }
/* Covers the card while a provider's answer is turned into a sign-in. Hidden
   until the page marks itself as signing in; see sign_in.html. */
.pt-signin-busy { display: none; }
.pt-signing-in .pt-signin-busy {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  position: absolute; inset: 0; z-index: 2;
  border-radius: var(--ml-radius-xl);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(3px);
}
.pt-signin-busy .pt-brand-lockup { height: 28px; }
.pt-signin-busy p { font-size: 14px; color: var(--ml-fg-secondary); margin: 0; }
/* Says "still going", never how far along - nothing here knows that. */
.pt-progress { width: 180px; height: 4px; border-radius: 999px; background: var(--ml-border); overflow: hidden; }
.pt-progress > span { display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--ml-brand); animation: pt-progress-slide 1.2s ease-in-out infinite; }
@keyframes pt-progress-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-progress > span { width: 100%; animation: pt-progress-pulse 1.6s ease-in-out infinite; }
  @keyframes pt-progress-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
  }
}
.pt-signin-alert { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--ml-radius-md); background: var(--ml-danger-soft); color: var(--ml-danger); font-size: 13px; }
.pt-signin-alert--ok { background: var(--ml-success-soft); color: var(--ml-success); }
.pt-signin-back { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ml-fg-secondary); text-decoration: none; }
.pt-signin-back:hover { color: var(--ml-fg); }
/* "Forgot password?", under the submit button so the keyboard reaches it last. */
.pt-signin-forgot { align-self: center; }
.pt-link { font-size: 13px; font-weight: 600; color: var(--ml-brand); text-decoration: none; }
.pt-link:hover { text-decoration: underline; }

/* ---------- Accept invite ---------- */
/* The invite envelope, the same animation the marketing site's invite-accepted
   page uses. It plays once and the invite is accepted as it finishes. The
   checkbox underneath is the real control — transparent and stretched over the
   art, so it stays focusable and clickable for anyone not waiting it out. */
.pt-accept-envelope { align-self: center; position: relative; width: 200px; cursor: pointer; }
.pt-accept-envelope input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
/* Reserved from the animation's own 550x517 so the card doesn't jump once the
   player swaps in its SVG. */
.pt-accept-art { width: 100%; aspect-ratio: 550 / 517; }
.pt-accept-art svg { display: block; width: 100%; height: 100%; }
.pt-accept-envelope input:focus-visible ~ .pt-accept-art { box-shadow: var(--ml-focus-ring); border-radius: var(--ml-radius-md); }
/* One framed card per product to install: app tile, name, store rating and the
   link that installs it — the shape a store listing uses, narrowed to the card. */
.pt-install-buttons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-install-card {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--ml-border); border-radius: var(--ml-radius-md); background: #FFFFFF;
}
.pt-install-icon { width: 44px; height: 44px; flex: none; border-radius: 10px; }
/* min-width lets the name ellipsize instead of shoving the button off the card. */
.pt-install-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pt-install-name { font-size: 14px; font-weight: 600; color: var(--ml-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-install-rating { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ml-fg-secondary); }
.pt-install-rating > i { color: var(--ml-krillin-100); font-size: 13px; }
.pt-install-card .pt-btn { flex: none; }

/* ============================================================
   Responsive — laptop, then tablet, then mobile. Tokens/visuals
   unchanged; only layout reflows.
   ============================================================ */

/* Laptop: the feature cards drop to two rows of three, and a data table starts
   scrolling inside its own card behind a frozen User column. */
@media (max-width: 1279px) {
  /* A grid track's default min-width is its content's, not its share of the
     row, so 1fr alone still lets a card hold the row open past the viewport. */
  .pt-features { grid-template-columns: repeat(3, 1fr); }
  .pt-feature { min-width: 0; }

  /* Four filter chips outgrow a narrow panel. The segmented control keeps its
     shape and scrolls inside itself rather than holding the panel open. */
  .pt-chips { overflow-x: auto; scrollbar-width: none; }
  .pt-chips::-webkit-scrollbar { display: none; }

  /* A table too wide for the window scrolls inside its own card, not the page.
     Each one holds itself open to what its own columns need, so a table that
     does fit is not made to scroll by a floor meant for a wider one. */
  .pt-table, .pt-matrix-scroll { overflow-x: auto; }
  /* Members: name, status, assigned date, row actions. Status keeps the room
     its widest badge needs: a status wider than its column spills over the
     neighbouring one, and on this side of the breakpoint the frozen User column
     covers that spill, so "Access Granted" comes out with its end cut off. */
  [data-pt-users] { --pt-cols: minmax(200px, 1.4fr) 152px 104px 96px; }
  .pt-thead, .pt-trow { min-width: 552px; }
  /* Per-user activity: name and four figures. */
  .pt-activity-head, .pt-activity-row { min-width: 520px; }
  /* Feature adoption: name, six features and a total - the one that cannot fit
     a laptop's content column, so it always scrolls here. */
  .pt-matrix-cols, .pt-matrix-row { min-width: 720px; }

  /* Freeze the User column so it stays visible while the rest scrolls. */
  .pt-thead > .pt-th--lead,
  .pt-trow > .pt-usercell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
  }
  /* The frozen column's hover fill has to be opaque: the hover token is a
     translucent wash, which lets a status badge scrolled under the column
     show through. #F5F5F5 is that wash over the column's white. */
  .pt-trow:hover > .pt-usercell { background: var(--ml-bg-subtle); }

  /* Same frozen first column for the Per-user activity table. */
  [data-pt-activity] .pt-activity-head > .pt-th--lead,
  [data-pt-activity] .pt-activity-row > .pt-usercell {
    position: sticky;
    left: 0;
    background: #FFFFFF;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
  }
  [data-pt-activity] .pt-activity-row > .pt-usercell { z-index: 1; }
  [data-pt-activity] .pt-activity-head > .pt-th--lead { z-index: 3; } /* sticky corner */
  [data-pt-activity] .pt-activity-row:hover > .pt-usercell { background: var(--ml-bg-subtle); }

  /* And the feature-adoption matrix. */
  [data-pt-matrix] .pt-matrix-cols > .pt-matrix-userhead,
  [data-pt-matrix] .pt-matrix-row > .pt-usercell {
    position: sticky;
    left: 0;
    background: #FFFFFF;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
  }
  [data-pt-matrix] .pt-matrix-row > .pt-usercell { z-index: 1; }
  [data-pt-matrix] .pt-matrix-cols > .pt-matrix-userhead { z-index: 3; } /* sticky corner */
  [data-pt-matrix] .pt-matrix-row:hover > .pt-usercell { background: var(--ml-bg-subtle); }
}

/* Tablet: drop columns, let content fit the viewport. */
@media (max-width: 1024px) {
  .pt-main { padding: 20px; }
  .pt-kpis { grid-template-columns: repeat(2, 1fr); }
  .pt-grid-2 { grid-template-columns: 1fr; }

  /* Stack the matrix header so the title isn't squeezed to one word per
     line; the matrix body keeps scrolling sideways instead. */
  .pt-matrix-head { flex-direction: column; align-items: stretch; gap: 12px; }
  /* Stacked, the filter chips would stretch the full width of the card. */
  .pt-matrix-head .pt-chips { align-self: flex-start; }

  /* The plan row wraps from here down, which leaves the divider hanging at the
     end of the first line. */
  .pt-divider-v { display: none; }
}

/* Mobile: off-canvas sidebar drawer, single-column, stacked. */
@media (max-width: 640px) {
  .pt-topbar { padding: 0 16px; gap: 8px; }
  .pt-hamburger { display: inline-flex; }
  .pt-usermenu-name { display: none; }

  .pt-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 45;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--ml-shadow-xl);
    padding-top: 16px;
  }
  .pt-app[data-drawer="open"] .pt-sidebar { transform: translateX(0); }
  .pt-app[data-drawer="open"] .pt-scrim {
    display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,0.4);
  }

  .pt-kpis, .pt-features { grid-template-columns: 1fr; }
  /* Save and Cancel go full width, one under the other, at a size a thumb can
     hit — side by side they are two small targets next to each other. */
  .pt-form-actions { flex-direction: column; gap: 10px; }
  .pt-form-actions .pt-btn { width: 100%; min-height: 44px; justify-content: center; }
  /* The switch and the upsell button drop below the text they belong to rather
     than squeezing it into a column of single words. */
  .pt-switch-row { flex-direction: column; gap: 12px; }
  .pt-upsell { flex-direction: column; align-items: flex-start; }
  /* Tighten the frozen User column's padding so more of a name shows. */
  [data-pt-users] .pt-usercell { padding: 0 12px; gap: 10px; }
  [data-pt-users] .pt-th--lead { padding-left: 12px; }
  [data-pt-users] .pt-rowactions { padding: 0 12px; }
  /* Feature matrix: wider frozen User column. The header stacking rule now
     lives in the tablet breakpoint above, since it's needed there too. */
  [data-pt-matrix] { --pt-cols: 220px repeat(6, 96px) 72px; }
  [data-pt-matrix] .pt-matrix-cols, [data-pt-matrix] .pt-matrix-row { min-width: 868px; }
  .pt-plan { gap: 12px; }
  .pt-plan-actions { margin-left: 0; width: 100%; }
  /* Square the action buttons' padding to save horizontal space. */
  .pt-plan-actions .pt-btn { padding: 8px; }
  /* Let the subscription warnings wrap rather than push the card sideways. */
  .pt-plan-cancelling, .pt-plan-ended { white-space: normal; }
  /* The date range picker takes its own line so the page title keeps the width
     it needs to stay on one. */
  .pt-pagehead { flex-wrap: wrap; }
  .pt-daterange { flex-basis: 100%; margin-left: 0; }
  .pt-panel-head { gap: 10px; }
  .pt-search { width: 100%; }
  .pt-chips--push { margin-left: 0; }
  .pt-sizes { grid-template-columns: repeat(2, 1fr); }
  .pt-modal { padding: 20px; border-radius: var(--ml-radius-lg); }
  .pt-toasts { left: 12px; right: 12px; top: 76px; width: auto; max-width: none; }
}