/* Customer workspace shell (v3/customer.js) and the workspace switcher (v3/ws-switcher.js). Layout only, on the LPX
   tokens (ds/lpx.css); no card, KPI, badge, table or chart class of its own. Mobile first: one column and the bottom
   tab bar on a phone; from 1025 px the left rail (the same as our own workspace), between them the menu opens it. */
.cw { min-height: 100vh; background: var(--lpx-page); color: var(--lpx-ink); }
.cw-brand img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.cw-brand span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-brand > div { min-width: 0; }
/* The rail (foundation 11-13): the same left rail as our own workspace, the v10 sections stacked with their labels. */
.cw-nav { display: flex; flex-direction: column; gap: 2px; }
.cw-side .cw-navsec { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding-left: 0; border-left: 0; }
.cw-side .cw-navsec small.lpx-sec { display: block; font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--lpx-faint); padding: 14px 10px 6px; margin: 0; }
.cw-side .cw-nav a.lpx-nav .n { margin-left: auto; }
.cw-side button.lpx-nav { border: 0; background: none; cursor: pointer; width: 100%; text-align: left; }
.cw-theme { margin-left: auto; flex: none; }
.cw-wsw { flex: 0 1 auto; min-width: 0; }
.cw-band { margin: 0 0 14px; }
.cw-h2 { font: var(--lpx-t-h); color: var(--lpx-ink2); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.cw-stack { display: flex; flex-direction: column; gap: 16px; }
.cw-two, .cw-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cw-embed { margin-top: 12px; min-width: 0; }
.cw-src { margin: 0 0 10px; }
.cw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.cw-steps li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--lpx-line); border-radius: var(--lpx-r-sm); background: var(--lpx-raised); min-width: 0; }
.cw-steps .l { font: var(--lpx-t-micro); color: var(--lpx-mute); text-transform: uppercase; letter-spacing: .05em; }
.cw-steps b { font: var(--lpx-t-kpi); font-size: 20px; }
.cw-steps small { font: var(--lpx-t-small); color: var(--lpx-mute); }
.cw-decide { min-width: 0; }
.cw-cards1 { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cw .bad { color: var(--lpx-bad); } .cw .good { color: var(--lpx-good); }
@media (min-width: 641px) { .cw-tabbar { display: none !important; } }
@media (min-width: 1024px) {
  .cw-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1440px) { .cw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* workspace switcher (agency mode and the owner's console) */
.wsw { position: relative; flex: none; min-width: 0; }
.wsw-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wsw-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsw-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(320px, calc(100vw - 24px)); max-height: 60vh; overflow: auto;
  background: var(--lpx-overlay); border: 1px solid var(--lpx-line2); border-radius: var(--lpx-r); box-shadow: var(--lpx-e2); padding: 8px; }
@media (max-width: 640px) { .wsw-pop { position: fixed; top: calc(var(--lpx-top) + 4px); left: 12px; right: 12px; width: auto; } }
.wsw-q { width: 100%; margin-bottom: 6px; }
.wsw-list { list-style: none; margin: 0; padding: 0; }
.wsw-list a, .wsw-list button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--lpx-r-sm); color: var(--lpx-ink); background: none; border: 0; font: 500 13px/1.3 var(--lpx-font); cursor: pointer; }
.wsw-list a:hover, .wsw-list button:hover { background: var(--lpx-raised); }
.wsw-list li[aria-selected="true"] > * { background: var(--lpx-accent-wash); }
.wsw-list small { color: var(--lpx-mute); font: var(--lpx-t-small); }
.wsw-none { padding: 8px 10px; color: var(--lpx-mute); font: var(--lpx-t-small); }
.wsw-note { margin: 6px 4px 2px; color: var(--lpx-mute); font: var(--lpx-t-small); }
.wsw-msg { font: var(--lpx-t-small); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }