.fsw-workspace-tabs{
  box-sizing:border-box;
  position:relative;
  display:flex;
  align-items:flex-end;
  width:100%;
  min-height:38px;
  flex:0 0 38px;
  margin:0;
  padding:1px 8px 0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}

/*
 * FS749J geometry baseline: the real canvas panel-body is the rounded grey
 * workspace shell, with the tab strip living inside it. The preview/ruler/grid
 * remain below at their established coordinates.
 */
.card.canvas > .panel-body.fsw-workspace-host{
  display:flex !important;
  flex-direction:column !important;
}

.card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs{
  flex:0 0 38px !important;
  width:100% !important;
  min-height:38px !important;
  margin:0 !important;
  padding:1px 8px 0 49px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Soft canvas-width baseline: visual-only, so it cannot move canvas geometry. */
.card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs::after{
  content:"";
  position:absolute;
  z-index:0;
  left:49px;
  right:32px;
  bottom:0;
  height:1px;
  background:rgba(146,154,166,.10);
  pointer-events:none;
}

body.df-hide-row-ruler .card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs{
  padding-left:11px !important;
}

body.df-hide-row-ruler .card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs::after{
  left:11px;
}

.card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs ~ #previewSections{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
}

.card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs ~ #previewSections .phone-grid,
.fsw-workspace-tabs ~ .panel-body .phone-grid{
  border-radius:0 0 16px 16px !important;
  border-top-color:transparent !important;
  box-shadow:0 10px 28px rgba(17,24,39,.06) !important;
}

.fsw-tab-scroller{
  position:relative;
  z-index:1;
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:flex-end;
  gap:2px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(60,60,67,.15) transparent;
  padding:0;
}

.fsw-tab-scroller::-webkit-scrollbar{height:4px;}
.fsw-tab-scroller::-webkit-scrollbar-track{background:transparent;}
.fsw-tab-scroller::-webkit-scrollbar-thumb{
  background:rgba(60,60,67,.15);
  border-radius:999px;
}

/*
 * Canvas-connected document tabs: every tab shares a calm 36px height and
 * fills the existing workspace strip upward. The active white tab sits flush
 * on the canvas edge, so it reads as the raised head of the same white sheet.
 * The strip itself remains 38px, so ruler/grid geometry does not move.
 */
.fsw-tab-shell{
  position:relative;
  flex:0 0 auto;
  display:block;
  height:36px;
  max-width:260px;
  border:0;
  border-radius:6px 6px 0 0;
  background:#f4f4f5;
  color:rgba(60,60,67,.80);
  overflow:visible;
  box-shadow:none;
  transition:background .14s ease,color .14s ease;
}

.fsw-tab-shell:hover:not(.is-active){
  background:#f1f1f2;
}

.fsw-tab-shell.is-active{
  z-index:2;
  height:36px;
  color:rgba(60,60,67,.88);
  background:#fff;
}

/*
 * Excel-style drag feedback: the real tab becomes a quiet placeholder gap
 * while a non-interactive visual clone is lifted above the strip. The model
 * order is committed only when the pointer is released on the strip.
 */
.fsw-workspace-tabs.is-reordering{
  user-select:none;
}

.fsw-tab-shell.is-drag-placeholder{
  background:transparent !important;
  color:transparent !important;
  box-shadow:none !important;
}

.fsw-tab-shell.is-drag-placeholder .fsw-tab-main,
.fsw-tab-shell.is-drag-placeholder .fsw-tab-close{
  visibility:hidden !important;
}

.fsw-tab-shell.is-drag-placeholder::before{
  content:"";
  position:absolute;
  z-index:5;
  left:-1px;
  top:7px;
  bottom:5px;
  width:2px;
  border-radius:999px;
  background:rgba(72,78,88,.24);
  pointer-events:none;
}

.fsw-tab-drag-ghost{
  position:fixed !important;
  z-index:2147483000 !important;
  margin:0 !important;
  pointer-events:none !important;
  opacity:.97;
  box-shadow:0 7px 18px rgba(17,24,39,.14) !important;
  transform:none !important;
  transition:none !important;
  will-change:left;
}

.fsw-tab-drag-ghost .fsw-tab-main{
  cursor:grabbing !important;
}

.fsw-tab-dot,
.fsw-tab-dirty{
  display:none !important;
}

.fsw-tab-main{
  appearance:none;
  border:0;
  background:transparent !important;
  color:inherit;
  height:100%;
  min-width:128px;
  max-width:260px;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  padding:0 38px 0 12px;
  cursor:grab;
  font:inherit;
  transform:none !important;
  touch-action:pan-y;
}

/*
 * The main app has a global button:hover rule that paints buttons blue and
 * translates them upward. Workspace controls intentionally opt out so hover
 * never changes the tab surface or its geometry.
 */
.fsw-tab-main:hover,
.fsw-tab-main:active{
  background:transparent !important;
  transform:none !important;
}

.fsw-tab-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.22;
  letter-spacing:.01em;
  color:rgba(60,60,67,.80);
  text-rendering:optimizeLegibility;
}

.fsw-tab-shell.is-active .fsw-tab-label{
  font-weight:600;
  color:rgba(60,60,67,.88);
}

/*
 * Bare close glyph: 26x26 click target, but no visible container, divider,
 * fill, ring or hover chip. Only the glyph colour changes.
 */
.fsw-tab-close{
  appearance:none;
  position:absolute;
  right:2px;
  top:0;
  bottom:0;
  width:26px;
  height:34px;
  margin:auto 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(67,73,82,.42);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:15px;
  font-weight:400;
  line-height:1;
  opacity:.78;
  transform:none !important;
  transition:color .12s ease,opacity .12s ease;
}

.fsw-tab-close:hover:not(:disabled){
  background:transparent !important;
  color:#2f3540;
  opacity:1;
  transform:none !important;
}

.fsw-tab-close:active:not(:disabled){
  background:transparent !important;
  color:#20252c;
  transform:none !important;
}

.fsw-tab-close:disabled{
  opacity:.24;
  cursor:default;
}

.fsw-tab-main:focus-visible{
  outline:2px solid rgba(83,94,120,.28);
  outline-offset:-2px;
}

.fsw-tab-close:focus-visible,
.fsw-add-tab:focus-visible{
  outline:none;
}

/*
 * Bare add glyph: the compact hit target stays invisible and sits tight to
 * the final tab. There is no pill/cap/container; only the plus glyph changes
 * tone on hover.
 */
.fsw-add-tab{
  appearance:none;
  flex:0 0 30px;
  width:30px;
  height:36px;
  margin:0 0 0 2px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(67,73,82,.68);
  cursor:pointer;
  font-size:19px;
  font-weight:400;
  line-height:1;
  display:grid;
  place-items:center;
  transform:none !important;
  transition:color .12s ease,opacity .12s ease;
}

.fsw-add-tab:hover{
  background:transparent !important;
  color:#2f3540;
  transform:none !important;
}

.fsw-add-tab:active{
  background:transparent !important;
  color:#20252c;
  transform:none !important;
}

/*
 * Cross-tab field transfer. Only an active Ctrl multi-selection gets a quiet
 * neutral outline; the class is cleared after drop/cancel. A destination tab receives a soft inset
 * cue while a field/group is dragged over it.
 */
.field-card.fsw-multi-selected:not(.selected){
  outline:2px solid rgba(86,96,110,.28) !important;
  outline-offset:1px !important;
}

.fsw-tab-shell.is-field-drop-target{
  background:#eceef0 !important;
  box-shadow:inset 0 -2px 0 rgba(72,78,88,.30) !important;
}

.fsw-tab-shell.is-field-drop-target .fsw-tab-label{
  color:rgba(47,53,64,.92) !important;
}

.fsw-workspace-tabs.is-field-transfer-drag .fsw-tab-shell:not(.is-field-drop-target){
  transition:background .10s ease,color .10s ease,box-shadow .10s ease;
}

@media (max-width:760px){
  .fsw-workspace-tabs{
    min-height:36px;
    flex-basis:36px;
    padding-top:1px;
  }

  .card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs{
    flex-basis:36px !important;
    min-height:36px !important;
    padding-top:1px !important;
  }

  .fsw-tab-shell{
    height:34px;
    max-width:225px;
    border-radius:6px 6px 0 0;
  }

  .fsw-tab-shell.is-active{
    height:34px;
  }

  .fsw-tab-main{
    min-width:118px;
    max-width:225px;
    padding-left:12px;
    padding-right:38px;
  }

  .fsw-tab-close{
    right:2px;
    width:26px;
    height:32px;
  }

  .fsw-add-tab{
    height:34px;
    flex-basis:28px;
    width:28px;
    margin-left:2px;
  }

  .card.canvas > .panel-body.fsw-workspace-host > .fsw-workspace-tabs ~ #previewSections .phone-grid,
  .fsw-workspace-tabs ~ .panel-body .phone-grid{
    border-radius:0 0 12px 12px !important;
  }
}