/* SWAP OS Live UI/UX Layer — 42.70.0
 * Loaded after the existing UI layers so the shell has one predictable responsive contract.
 */
:root{
  --swap-live-sidebar:232px;
  --swap-live-sidebar-mini:72px;
  --swap-live-header:64px;
  --swap-live-gap:16px;
  --swap-live-radius:12px;
  --swap-live-line:#e5e7eb;
  --swap-live-bg:#f7f8fb;
  --swap-live-surface:#fff;
  --swap-live-text:#0b1230;
  --swap-live-muted:#667085;
  --swap-live-primary:#0012ff;
}
html{scroll-behavior:smooth}
body.swap-os-body{background:var(--swap-live-bg);overflow-x:hidden}
.swap-os-app{min-height:100dvh}
.swap-os-sidebar{
  width:var(--swap-live-sidebar);
  z-index:1000;
  transition:width .18s ease,transform .18s ease,box-shadow .18s ease;
  overscroll-behavior:contain;
}
.swap-os-sidebar-top{flex:0 0 var(--swap-live-header);height:var(--swap-live-header)}
.swap-os-nav{min-height:0;scrollbar-width:thin}
.swap-os-main{margin-left:var(--swap-live-sidebar);min-width:0;width:calc(100% - var(--swap-live-sidebar));transition:margin-left .18s ease,width .18s ease}
.sidebar-collapsed .swap-os-main{margin-left:var(--swap-live-sidebar-mini);width:calc(100% - var(--swap-live-sidebar-mini))}
.sidebar-collapsed .swap-os-sidebar{width:var(--swap-live-sidebar-mini)}
.swap-os-topbar{
  min-width:0;
  position:sticky;
  top:0;
  z-index:900;
  min-height:var(--swap-live-header);
}
.swap-os-breadcrumb{min-width:0}
.swap-os-breadcrumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swap-os-top-right{min-width:0}
.swap-os-content{
  width:100%;
  box-sizing:border-box;
  max-width:1600px;
  margin-inline:auto;
}
.page-head{min-width:0}
.page-head>div:first-child{min-width:0}
.page-head h1,.page-head p{overflow-wrap:anywhere}
.card,.panel{min-width:0}
.panel-head{min-width:0}
.panel-head>div{min-width:0}
.panel-head h2,.panel-head h3{overflow-wrap:anywhere}
.btn,.swap-inbox-trigger,.swap-command-trigger,.swap-os-icon-btn{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(0,18,255,.22);
  outline-offset:2px;
}
input,select,textarea{max-width:100%;box-sizing:border-box}
img,svg,video{max-width:100%;height:auto}
table{border-collapse:separate;border-spacing:0}

/* Prevent common grid children from creating implicit overflow columns. */
.swap-os-content [class*="grid"]>*,
.swap-os-content [class*="Grid"]>*,
.swap-os-content .panel>*{min-width:0}

/* Desktop: compact, app-like header controls. */
@media (min-width:1201px){
  .swap-os-content{padding:24px 28px 100px}
}
@media (min-width:901px) and (max-width:1200px){
  .swap-os-content{padding:20px 18px 100px}
  .swap-command-trigger{min-width:0;max-width:180px}
  .swap-command-trigger span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Tablet: keep the desktop shell, but make the topbar and content breathe. */
@media (max-width:900px){
  .swap-os-main{margin-left:0!important;width:100%!important}
  .swap-os-sidebar{
    width:min(300px,86vw)!important;
    transform:translateX(-105%);
    box-shadow:18px 0 48px rgba(15,23,42,.20);
  }
  body.sidebar-open-mobile .swap-os-sidebar{transform:translateX(0)}
  body.sidebar-open-mobile::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:950;
    background:rgba(2,6,23,.38);
    backdrop-filter:blur(2px);
  }
  .swap-os-topbar{padding:0 16px}
  .swap-os-mobile-left{display:flex!important;align-items:center;flex:0 0 auto;margin-right:10px}
  .swap-os-mobile-left .swap-os-icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--swap-live-line);border-radius:10px;background:#fff;color:var(--swap-live-text)}
  .swap-os-top-right{gap:6px;overflow-x:auto;scrollbar-width:none;justify-content:flex-end}
  .swap-os-top-right::-webkit-scrollbar{display:none}
  .swap-command-trigger{min-width:42px;width:42px;justify-content:center;padding:8px}
  .swap-command-trigger span:nth-child(2),.swap-command-trigger kbd{display:none}
  .swap-inbox-trigger span:last-child,.swap-notification-trigger span:last-child{display:none}
  .swap-global-create{white-space:nowrap}
  .swap-os-content{padding:18px 16px 96px}
}

/* Mobile: single-column content, full-width actions and fixed navigation. */
@media (max-width:720px){
  .swap-os-sidebar{width:min(310px,88vw)!important}
  .swap-os-topbar{padding:0 10px;gap:8px}
  .swap-os-breadcrumb{flex:1;min-width:0}
  .swap-os-breadcrumb strong{font-size:15px}
  .swap-os-top-right{flex:0 0 auto;max-width:62vw}
  .swap-os-profile{display:none!important}
  .swap-os-content{padding:14px 10px 96px}
  .page-head{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .page-head h1{font-size:24px}
  .page-head .toolbar,.page-head .hero-actions{width:100%}
  .page-head .toolbar>.btn,.page-head .hero-actions>.btn{flex:1 1 auto}
  .swap-os-content .kpi-grid,
  .swap-os-content .focus-kpi-grid,
  .swap-os-content .grid-2,
  .swap-os-content .project-grid,
  .swap-os-content .goal-grid,
  .swap-os-content .domain-stat-grid{grid-template-columns:1fr!important}
  .swap-os-content .form-grid{grid-template-columns:1fr!important}
  .swap-os-content .form-grid>*{grid-column:1/-1!important}
  .swap-os-content .panel{padding:14px;border-radius:12px;margin-bottom:12px}
  .swap-os-content .panel-head{align-items:flex-start;flex-wrap:wrap}
  .swap-os-content .panel-head .toolbar{width:100%}
  .swap-os-content .panel-head .toolbar .btn{flex:1 1 auto}
  .swap-os-content table{min-width:680px}
  .swap-os-content .panel:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .swap-os-content .btn{min-height:38px}
  .swap-os-content .filter-bar{display:grid;grid-template-columns:1fr!important}
  .swap-os-content .filter-bar>*{width:100%!important}
  .swap-os-content .hero-actions,.swap-os-content .form-actions,.swap-os-content .project-actions{width:100%}
  .swap-os-content .hero-actions>.btn,.swap-os-content .form-actions>.btn,.swap-os-content .project-actions>.btn{flex:1 1 140px}
  .swap-os-content .card{padding:14px}
  .swap-os-content .card strong{font-size:22px}
  .swap-mobile-nav{z-index:1300}
}

/* Very narrow devices: remove decorative density, never horizontal-scroll the app shell. */
@media (max-width:420px){
  .swap-os-top-right{gap:4px;max-width:58vw}
  .swap-global-create{font-size:0!important;width:40px;padding:0!important}
  .swap-global-create::before{content:"+";font-size:20px}
  .swap-inbox-trigger,.swap-notification-trigger{padding:8px!important}
  .swap-os-content{padding-left:8px;padding-right:8px}
  .swap-os-content .btn{padding-inline:10px}
  .swap-os-content .form-actions>.btn{flex-basis:100%}
}

/* Reduce motion without disabling interaction. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* SWAP OS Mobile-First UX Contract — 42.70.0
 * Design priority: phone 80% / desktop & laptop 20%.
 * Mobile is a first-class operating surface, not a compressed desktop.
 */
:root{
  --swap-mobile-nav-height:68px;
  --swap-mobile-safe-bottom:max(10px, env(safe-area-inset-bottom));
  --swap-mobile-touch:44px;
}

/* Base mobile-first interaction rules */
.swap-os-app,.swap-os-main,.swap-os-content{min-width:0}
button,a,.btn,input,select,textarea{touch-action:manipulation}
.btn,.swap-os-icon-btn,.swap-mobile-nav-item,.swap-mobile-nav-create{min-height:var(--swap-mobile-touch)}

@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body.swap-os-body{padding-bottom:calc(var(--swap-mobile-nav-height) + var(--swap-mobile-safe-bottom))}
  .swap-os-app{min-height:100dvh}
  .swap-os-topbar{
    position:sticky;
    top:0;
    min-height:58px;
    padding-top:max(0px,env(safe-area-inset-top));
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(14px);
  }
  .swap-os-mobile-left{display:flex!important}
  .swap-os-top-right{gap:4px;max-width:55vw}
  .swap-header-health,.swap-header-integrations,.swap-os-clock,.info-global{display:none!important}
  .swap-os-breadcrumb{display:grid;align-content:center}
  .swap-os-breadcrumb .eyebrow,.swap-shell-purpose{display:none!important}
  .swap-os-breadcrumb strong{font-size:15px;line-height:1.2}

  /* Phone navigation is fixed, safe-area aware and visually separated from content. */
  .swap-mobile-nav{
    position:fixed!important;
    left:0;right:0;bottom:0;
    height:var(--swap-mobile-nav-height);
    padding:6px 8px var(--swap-mobile-safe-bottom);
    box-sizing:content-box;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr)) 56px repeat(2,minmax(0,1fr));
    align-items:end;
    gap:2px;
    background:rgba(255,255,255,.97);
    border-top:1px solid rgba(15,23,42,.10);
    box-shadow:0 -8px 28px rgba(15,23,42,.10);
    backdrop-filter:saturate(180%) blur(16px);
    z-index:1400;
  }
  .swap-mobile-nav-item{
    min-width:0;
    min-height:52px;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:12px;
    text-decoration:none;
    color:#667085;
    background:transparent;
    border:0;
    font:inherit;
  }
  .swap-mobile-nav-item span{font-size:21px;line-height:1}
  .swap-mobile-nav-item small{font-size:10px;font-weight:700;line-height:1.1}
  .swap-mobile-nav-item.is-active{color:var(--swap-live-primary);background:rgba(0,18,255,.07)}
  .swap-mobile-nav-create{
    width:50px;height:50px;min-height:50px;
    align-self:center;justify-self:center;
    display:grid!important;place-items:center;
    border:4px solid #fff;
    border-radius:18px;
    background:var(--swap-live-primary);
    color:#fff;
    box-shadow:0 8px 20px rgba(0,18,255,.24);
  }
  .swap-mobile-nav-create span{font-size:28px;line-height:1}

  .swap-os-content{padding:12px 10px calc(18px + var(--swap-mobile-safe-bottom))!important}
  .page-head{gap:10px;margin-bottom:14px}
  .page-head h1{font-size:23px;line-height:1.15}
  .page-head p{font-size:13px;line-height:1.45}
  .page-head .toolbar,.page-head .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .page-head .toolbar>.btn,.page-head .hero-actions>.btn{width:100%;min-width:0}

  /* Cards become vertically scannable mobile surfaces. */
  .swap-os-content .card,.swap-os-content .panel{border-radius:14px;padding:14px;margin-bottom:10px}
  .swap-os-content .panel-head{gap:8px}
  .swap-os-content .panel-head h2,.swap-os-content .panel-head h3{font-size:17px;line-height:1.25}
  .swap-os-content .muted{font-size:12px;line-height:1.45}
  .swap-os-content .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .swap-os-content .kpi-grid .card{min-height:92px}
  .swap-os-content .kpi-grid .card strong{font-size:20px}

  /* Forms: one decision/input per row; labels stay close to their controls. */
  .swap-os-content .form-grid{grid-template-columns:1fr!important;gap:10px}
  .swap-os-content label{font-size:13px}
  .swap-os-content input:not([type=checkbox]):not([type=radio]),
  .swap-os-content select,.swap-os-content textarea{min-height:44px;font-size:16px}
  .swap-os-content textarea{min-height:100px}
  .swap-os-content .form-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .swap-os-content .form-actions .btn{width:100%}

  /* Tables stay usable without forcing the whole page wider. */
  .swap-os-content .table-wrap,.swap-os-content .data-table-wrap,.swap-os-content .calendar-shell,.swap-os-content .table-responsive,.swap-os-content .panel:has(table){overflow-x:auto;max-width:100%;overscroll-behavior-inline:contain}
  .swap-os-content table{min-width:640px}

  /* Drawers/dialogs become bottom sheets on phones. */
  .os-context-drawer,.os-command-center .os-command-dialog,.os-action-panel,.swap-notification-panel,.swap-workspace-panel{
    width:100%!important;max-width:100%!important;
    border-radius:20px 20px 0 0!important;
  }
  .os-context-drawer,.os-action-center,.swap-notification-center,.os-command-center{align-items:flex-end!important}
  .os-context-body,.os-command-results,.os-action-list,.swap-notification-list{max-height:calc(100dvh - 190px);overflow:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:480px){
  .swap-os-topbar{min-height:56px}
  .swap-os-content{padding-left:8px!important;padding-right:8px!important}
  .swap-os-content .kpi-grid{grid-template-columns:1fr 1fr!important}
  .page-head .toolbar,.page-head .hero-actions{grid-template-columns:1fr}
  .swap-mobile-nav{grid-template-columns:repeat(3,minmax(0,1fr)) 52px repeat(2,minmax(0,1fr));padding-left:4px;padding-right:4px}
  .swap-mobile-nav-item small{font-size:9px}
  .swap-mobile-nav-create{width:46px;height:46px;min-height:46px;border-radius:16px}
}

@media (min-width:901px){
  /* Desktop/laptop deliberately stays lighter: preserve workspace density without changing workflows. */
  .swap-mobile-nav{display:none!important}
  .swap-os-content{max-width:1600px}
}

/* =========================================================
 * SWAP OS 42.70.0 — Responsive Sidebar Contract
 * Desktop >1100: persistent/collapsible rail.
 * Laptop/tablet 721–1100: slide-in workspace drawer.
 * Phone <=720: touch-first slide-in drawer.
 * ========================================================= */
:root{
  --swap-sidebar-desktop:232px;
  --swap-sidebar-mini:72px;
  --swap-sidebar-drawer:min(320px,86vw);
  --swap-sidebar-phone:min(310px,88vw);
}

/* Keep the desktop rail predictable. */
@media (min-width:1101px){
  .swap-os-sidebar{width:var(--swap-sidebar-desktop)!important;transform:none!important;position:fixed!important}
  .swap-os-main{margin-left:var(--swap-sidebar-desktop)!important;width:calc(100% - var(--swap-sidebar-desktop))!important}
  .swap-os-body.sidebar-collapsed .swap-os-sidebar{width:var(--swap-sidebar-mini)!important}
  .swap-os-body.sidebar-collapsed .swap-os-main{margin-left:var(--swap-sidebar-mini)!important;width:calc(100% - var(--swap-sidebar-mini))!important}
  .swap-os-body.sidebar-collapsed .swap-os-sidebar .nav-label,
  .swap-os-body.sidebar-collapsed .swap-os-sidebar .swap-os-mini-user span,
  .swap-os-body.sidebar-collapsed .swap-os-sidebar .swap-os-logout{display:none}
  .swap-os-body.sidebar-collapsed .swap-os-sidebar .swap-os-nav-item{justify-content:center}
}

/* Laptop + tablet: never squeeze navigation into a 72px rail. */
@media (min-width:721px) and (max-width:1100px){
  .swap-os-sidebar{
    width:var(--swap-sidebar-drawer)!important;
    position:fixed!important;
    transform:translateX(-105%);
    z-index:1000;
    box-shadow:18px 0 48px rgba(15,23,42,.20);
  }
  .swap-os-body.sidebar-open-mobile .swap-os-sidebar{transform:translateX(0)}
  .swap-os-main{margin-left:0!important;width:100%!important}
  .swap-os-body.sidebar-open-mobile::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:950;
    background:rgba(2,6,23,.38);
    backdrop-filter:blur(2px);
  }
  .swap-os-mobile-left{display:flex!important;align-items:center;flex:0 0 auto}
  .swap-os-mobile-left .swap-os-icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--swap-live-line);border-radius:10px;background:#fff;color:var(--swap-live-text)}
  .swap-os-content{padding-left:18px;padding-right:18px}
}

/* Phone: larger touch targets, full-height drawer and safe-area spacing. */
@media (max-width:720px){
  .swap-os-sidebar{
    width:var(--swap-sidebar-phone)!important;
    max-width:88vw;
    position:fixed!important;
    inset:0 auto 0 0!important;
    transform:translate3d(-105%,0,0);
    z-index:1500;
    box-shadow:20px 0 54px rgba(15,23,42,.24);
    will-change:transform;
  }
  .swap-os-body.sidebar-open-mobile .swap-os-sidebar{transform:translate3d(0,0,0)}
  .swap-os-body.sidebar-open-mobile::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1450;
    background:rgba(2,6,23,.42);
    backdrop-filter:blur(2px);
  }
  .swap-os-sidebar-top{height:58px!important;min-height:58px!important;padding-left:14px!important;padding-right:12px!important}
  .swap-os-sidebar .swap-os-nav{padding:8px 10px 12px}
  .swap-os-sidebar .swap-os-nav-item{min-height:46px;padding:10px 12px;border-radius:11px}
  .swap-os-sidebar .swap-os-side-footer{padding:12px}
  .swap-os-mobile-left{display:flex!important;align-items:center;flex:0 0 auto}
  .swap-os-mobile-left .swap-os-icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--swap-live-line);border-radius:11px;background:#fff;color:var(--swap-live-text)}
  .swap-os-main{margin-left:0!important;width:100%!important}
}

/* A visible close affordance inside the drawer without adding another control. */
@media (max-width:1100px){
  .swap-os-sidebar-top [data-sidebar-toggle]{width:42px;height:42px;display:grid;place-items:center;border-radius:10px}
  .swap-os-body.sidebar-open-mobile .swap-os-sidebar-top [data-sidebar-toggle]{background:#f3f5f9;color:#111827}
}

/* Do not let the backdrop create an accidental horizontal scroll context. */
html.sidebar-mobile-lock,html.sidebar-mobile-lock body{overflow:hidden}

/* SWAP OS 42.87.0 — UX shell 7: responsive workspace polish. */
:root{--swap-ux-radius:14px;--swap-ux-gap:16px}
.swap-os-main{min-width:0;max-width:100%;}
.swap-os-content{box-sizing:border-box;min-width:0;}
.swap-os-content :where(img,svg,video,canvas){max-width:100%;}
.swap-os-content :where(input,select,textarea,button){max-width:100%;}
.swap-os-content :where(table){max-width:100%;}
@media (min-width:1101px){
 .swap-os-content{padding-left:clamp(22px,2.2vw,36px);padding-right:clamp(22px,2.2vw,36px);}
}
@media (max-width:1100px){
 .swap-os-content{padding:20px 18px calc(84px + env(safe-area-inset-bottom))!important;}
 .swap-os-topbar{padding-left:16px!important;padding-right:16px!important;gap:10px;}
 .swap-os-content :where(.card,.panel,.widget,.swap-card){min-width:0;max-width:100%;}
}
@media (max-width:640px){
 .swap-os-content{padding:14px 12px calc(82px + env(safe-area-inset-bottom))!important;}
 .swap-os-topbar{min-height:58px;padding-left:12px!important;padding-right:12px!important;}
 .swap-os-breadcrumb{min-width:0;max-width:100%;}
 .swap-os-breadcrumb strong{overflow-wrap:anywhere;}
 .swap-os-content :where(input,select,textarea){min-height:42px;}
 .swap-os-content :where(button,[role=button],a){touch-action:manipulation;}
 .swap-os-content :where(table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
@media (prefers-reduced-motion:reduce){
 .swap-os-body *, .swap-os-body *::before, .swap-os-body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* SWAP OS 42.88.0 — UX Shell 8: accessible interaction and data-state polish. */
.swap-os-content :where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible{
  outline:3px solid var(--swap-live-primary,#2563eb)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.14)!important;
}
.swap-os-content :where(button,[role="button"],input[type="submit"]):disabled,
.swap-os-content :where(button,[role="button"],[aria-disabled="true"]){
  cursor:not-allowed;
}
.swap-os-content :where(input,select,textarea)[aria-invalid="true"],
.swap-os-content .is-invalid :where(input,select,textarea){
  border-color:#b91c1c!important;
  box-shadow:0 0 0 1px rgba(185,28,28,.12);
}
.swap-os-content :where(th){text-align:left;font-weight:650;}
.swap-os-content :where(td,th){overflow-wrap:anywhere;}
.swap-os-content :where(.empty-state,.is-empty,[data-state="empty"]){
  min-width:0;max-width:100%;text-wrap:pretty;
}
.swap-os-content :where(.loading,[aria-busy="true"]){cursor:progress;}
@media (forced-colors:active){
 .swap-os-content :where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible{outline:2px solid Highlight!important;box-shadow:none!important;}
}
@media (max-width:640px){
 .swap-os-content :where(button,[role="button"],input[type="submit"]){min-height:42px;}
 .swap-os-content :where(td,th){padding-inline:10px;}
}